Question

有人可以解释如何将孩子追加到父母<div class="..."> 并解决这个问题？

innerHTML应该在每个 <div class='categories'> </div>之后设置变量 str 它是在为文本设置值时动态创建的，然后按“按”按钮

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

<!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函数

希望它能帮助你更多地理解

Answer 2

According to MDN，Node.appendChild()想要一个Node对象作为其参数。它不会从一串标记创建一个，所以你必须自己创建它。

您可以使用document.createElement()创建Node对象，然后根据需要设置其innerHTML。完成所有Node设置后，您可以使用appendChild()将其添加到DOM中。

Answer 3

如果你想使用appendChild（）mehtod它不会这样工作。首先你必须使用element.createElement（）方法创建一个子。现在专注于你的代码我遇到了一些问题。你的getElementsByClassName正在返回一个包含所有具有相同类的元素的节点列表。所以，如果你想抓住它，请提供一个索引。因为你只有一个，最好为它提供[0]索引。

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

如果你没有在getElementsByClassName（）中提供索引，你也可以访问它

 newCategoryNode[0].innerHTMM=str

我从你的代码中删除了for loop。如果你想使用循环使用for...in循环，因为它是一个对象列表。

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

你还没有定义与你的某个输入标签相关的checkAll()功能。这肯定会给你一个错误。我修改了你的代码，它可能会给你你想要的结果

            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">

getElementsByClassName和innerHTML

3 个答案: