使用 PURE JS 添加基于输入标签的占位符属性 - 无 jQuery

Question

我需要获取每个元素的标签并将其作为占位符属性应用于输入，虽然我得到了大约一半，但似乎无法仅获取元素的文本来添加属性

请注意，我无法在任何方面使用 jQuery

JS：

var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
  var chel = el.querySelectorAll('.field-label');
  console.log(chel.textContent);
});

HTML：

<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
    <p class="form-field first_name pd-text required ">
        <label class="field-label" for="25492_61334pi_25492_61334">First Name</label>
        <input type="text" name="25492_61334pi_25492_61334" id="25492_61334pi_25492_61334" value="" class="text" size="30" maxlength="32" onchange="" /> 
    </p>

    <div id="error_for_25492_61334pi_25492_61334" style="display:none"></div>

    <p class="form-field last_name pd-text required ">
        <label class="field-label" for="25492_61336pi_25492_61336">Last Name</label>
        <input type="text" name="25492_61336pi_25492_61336" id="25492_61336pi_25492_61336" value="" class="text" size="30" maxlength="32" onchange="" /> 
    </p>

    <div id="error_for_25492_61336pi_25492_61336" style="display:none"></div>

    <p class="form-field email pd-text required ">
        <label class="field-label" for="25492_61338pi_25492_61338">Email</label>
        <input type="text" name="25492_61338pi_25492_61338" id="25492_61338pi_25492_61338" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61338, 12545572);" /> 
    </p>

    <div id="error_for_25492_61338pi_25492_61338" style="display:none"></div>

    <p class="form-field company pd-text required ">
        <label class="field-label" for="25492_61340pi_25492_61340">Company</label>
        <input type="text" name="25492_61340pi_25492_61340" id="25492_61340pi_25492_61340" value="" class="text" size="30" maxlength="100" onchange="" /> 
    </p>

    <div id="error_for_25492_61340pi_25492_61340" style="display:none"></div>

    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
        <label for="pi_extra_field">Comments</label>
        <input type="text" name="pi_extra_field" id="pi_extra_field" /> 
    </p>

    <input name="_utf8" type="hidden" value="&#9731;" />

    <p class="submit">
        <input type="submit" accesskey="s" value="Send Message" /> 
    </p>

    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>

Answer 1

var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
  var label = labels.item(i);
  var text = label.textContent;
  label.parentNode.classList.contains("required") && (text += "*");
  label.nextElementSibling.setAttribute("placeholder", text);
}