CODEWITHSUNDEEP
javascripthtmlgetelementsbyclassname
nikolaos mparoutis
nikolaos mparoutis

Reputation: 450

getElementsByClassName and innerHTML

Can someone explain how to appendChild to a parent <div class="..."> and solve this ?

The innerHTML should set the variable str after every <div class='categories'> </div> it created dynamically when you set a value to the texts and press the button "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>

Upvotes: 0

Views: 5697

Answers (3)

Oli Soproni B.
Oli Soproni B.

Reputation: 2800

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

hope this could give you idea on how to do it.

you cannot use appendChild to a node using a string it shoud also be a DOM element

you can check on document.createElement and document.createTextNode function

hope it would help you more on your understanding

Upvotes: 1

AL-zami
AL-zami

Reputation: 9066

If you want to use appendChild() mehtod it doesn't work this way.First you have to create a child using element.createElement() method.Now concentrating on your code i encountered some problem. your getElementsByClassName is returning a nodelist containing all the elements having same class.So if you want to grab it provide it an index.As you have only one it's better to provide [0] index to it.

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

if you don't provide index in getElementsByClassName() you can also access it 

 newCategoryNode[0].innerHTMM=str

i removed for loop from you code.If you want to use loop use for...in loop instead as it is a list of object.

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

you haven't defined checkAll() function related to one of your input tag.That surely get you an error.I've modified your code and it might give you the result you want

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

Upvotes: 0

Chris Bouchard
Chris Bouchard

Reputation: 805

According to MDN, Node.appendChild() wants a Node object as its argument. It won't create one from a string of markup, so you'll have to create it yourself.

You can use document.createElement() to create a Node object, then you can set its innerHTML as you like. Once the Node is all set how you want, you can add it to the DOM using appendChild().

Upvotes: 0

Related Questions