getElementsByClassName 和 innerHTML

Question

谁能解释一下如何将 appendChild 附加到父对象 <div class="..."> 并解决这个问题？

innerHTML 应该在 every <div class='categories'> </div> 之后设置变量 str 当您为文本设置一个值并按下按钮 "press"

时，它会动态创建

function addField() {
    var categoryValue = document.getElementById("newCateg").value;
    var fieldValue = document.getElementById("newField").value;
// var selOption = document.option[selectedIndex.text];

    var newCategoryNode = document.getElementsByClassName('categories');

    var categoryPart1 = [
        '    <div class="categories">',
        '<input type="checkbox" class="check"/>  <a class="titles">'].join('');

    var categoryPart2 = [
        '</a>',
        '    <hr/>',
        '   <input type="checkbox" class="check"/> ' ].join('');

    var categoryPart3 = [
        '        <input type="text"  />',
        '   <br> </br>',
        '<hr/>',
        '</div>'].join('');

    var str=categoryPart1 + categoryValue + categoryPart2 + "" +       fieldValue + "" + categoryPart3;
    
   
    for (var i = 0; i < newCategoryNode.length; i++) {
        newCategoryNode[i].innerHTML=str;
    }
}

<!DOCTYPE html>
<html>
    
    <body>
        <input type="text" id="newCateg" />
        <input type="text" id="newField" />
        <div class="categories">
            <p class="titles">
                <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" />FUN</p>
            <hr/>
            <div class="field">
                <input type="checkbox" class="check" />D
                <input type="text" />
                </br>
            </div>
            <input type="checkbox" class="check" />
            <label>S</label>
            <input type="text" id="c1" />
            </br>
            <input type="checkbox" class="check" />
            <label>A</label>
            <input type="text" />
            <hr/>
        </div>
        <input type="button" onclick="addField()" value="Press">
    </body>

</html>

Answer 1

According to MDN、Node.appendChild() 想要一个 Node 对象作为其参数。它不会根据一串标记创建一个，因此您必须自己创建它。

您可以使用document.createElement()创建一个Node对象，然后您可以随意设置它的innerHTML。一旦 Node 设置完成，您可以使用 appendChild().

将其添加到 DOM

Answer 2

如果你想使用 appendChild() 方法，它不起作用 way.First 你必须创建一个 child 使用 element.createElement() method.Now 专注于你的代码我遇到了一些问题。你的 getElementsByClassName 正在返回一个节点列表，其中包含所有具有相同 class.So 的元素，如果你想抓住它，请提供一个 index.As 你只有一个，最好为它提供 [0] 索引。

var newCategoryNode = document.getElementsByClassName('categories')[0];

如果您不在 getElementsByClassName() 中提供索引，您也可以访问它

 newCategoryNode[0].innerHTMM=str

我从你那里删除了 for loop code.If 你想使用循环使用 for...in 循环而不是因为它是 object.

的列表

var newCategoryNode = document.getElementsByClassName('categories');
               for(key in newCategoryNode){
                   newCategoryNode[key].innerHTML=str;
               }

您还没有定义与您的输入之一相关的 checkAll() 函数 tag.That 肯定会让您 error.I 修改了您的代码，它可能会给您想要的结果

            function addField() {
   console.log('logged');
                var categoryValue = document.getElementById("newCateg").value;
                var fieldValue = document.getElementById("newField").value;
            // var selOption = document.option[selectedIndex.text];

                var newCategoryNode = document.getElementsByClassName('categories')[0];

                var categoryPart1 = [
                    '    <div class="categories">',
                    '<input type="checkbox" class="check"/>  <a class="titles">'].join('');
  console.log(categoryPart1);
                var categoryPart2 = [
                    '</a>',
                    '    <hr/>',
                    '   <input type="checkbox" class="check"/> ' ].join('');

                var categoryPart3 = [
                    '        <input type="text"  />',
                    '   <br> </br>',
                    '<hr/>',
                    '</div>'].join('');

                var str=categoryPart1 + categoryValue + categoryPart2 +   fieldValue + "" + categoryPart3;
                
                console.log(str);
              
      newCategoryNode.innerHTML =str;
   
     }

        <input type="text" id="newCateg" />
        <input type="text" id="newField" />
        <div class="categories">
            <p class="titles">
                <input type="checkbox" class="check" />FUN</p>
            <hr/>
            <div class="field">
                <input type="checkbox" class="check" />D
                <input type="text" />
                </br>
            </div>
            <input type="checkbox" class="check" />
            <label>S</label>
            <input type="text" id="c1" />
            </br>
            <input type="checkbox" class="check" />
            <label>A</label>
            <input type="text" />
            <hr/>
        </div>
        <input type="button" onClick="addField();" value="Press">

Answer 3

<!DOCTYPE html>
<html>

    <body>
        <input type="text" id="newCateg" />
        <input type="text" id="newField" />
        <div class="categories">
            <p class="titles">
                <input type="checkbox" class="check" onchange="checkAll('divID',true,elem)" />FUN</p>
            <hr/>
            <div class="field">
                <input type="checkbox" class="check" />D
                <input type="text" />
                </br>
            </div>
            <input type="checkbox" class="check" />
            <label>S</label>
            <input type="text" id="c1" />
            </br>
            <input type="checkbox" class="check" />
            <label>A</label>
            <input type="text" />
            <hr/>
        </div>
        <input type="button" onclick="addField()" value="Press">
    </body>

    <script>
        function addField() {
                var categoryValue = document.getElementById("newCateg").value;
                var fieldValue = document.getElementById("newField").value;
            // var selOption = document.option[selectedIndex.text];

                var newCategory = document.getElementsByClassName('categories');

                var div = document.createElement('div');
                    div.setAttribute('class', 'categories');

                var a = document.createElement('a');
                    a.setAttribute('class', 'titles');

                var hr = document.createElement('hr');

                var input_check = document.createElement('input');
                    input_check.setAttribute('type', 'checkbox');
                    input_check.setAttribute('class', 'check');

                var input = document.createElement('input');
                    input.setAttribute('type', 'text');

                var br = document.createElement('br');

                var textnode = document.createTextNode(fieldValue);

                div.appendChild(input);
                div.appendChild(a);
                div.appendChild(hr);
                div.appendChild(input_check);
                div.appendChild(textnode);
                div.appendChild(input);
                div.appendChild(br);
                div.appendChild(br);
                console.log(div);

                var node = document.getElementsByClassName('categories');

                for (var i = 0; i < node.length; i++) {
                    node[i].appendChild(div);
                }
            }

    </script>

</html>

希望这可以让您知道如何去做。

你不能使用 appendChild 到一个使用字符串的节点它也应该是一个 DOM 元素

您可以查看 document.createElement 和 document.createTextNode 函数

希望对您的理解有所帮助

getElementsByClassName 和 innerHTML

getElementsByClassName and innerHTML

html

javascript

getelementsbyclassname