getElementsByClassName 및 innerHTML

누군가 부모에게 appendChild를 설명하는 방법 <div class="..."> 을 해결할 수 있습니까?getElementsByClassName 및 innerHTML

innerHTML을은 후 변수 STR을 설정해야합니다 모든<div class='categories'> </div> 당신이 텍스트에 값을 설정하고 버튼 "을 눌러"

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> \t </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>

출처

2015-01-14 TraffyT

* appendChild *는 문자열이 아닌 DOM 요소를 추가하기위한 것입니다. 아마 당신은'node [i] .innerHTML = str;'또는'node [i] .innerHTML + = str;'을 원할 것입니다. – RobG

좋아, 그럼 난 어떻게 innerHTML을 parrent 클래스에 추가 할 수 있습니까? – TraffyT

아, * 가짜 * XML 마크 업 스타일을 없애고, HTML 문서입니다. ;-) – RobG

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

희망이 당신에게 그것을 수행하는 방법에 대한 아이디어를 줄 수 있습니다.

당신이 또한 DOM 요소를 수 갈까요 문자열을 사용하여 노드에 appendChild를 사용할 수 없습니다

당신이

그것을 이해에 더 도움이 될 희망 document.createElement과 document.createTextNode 기능을 확인할 수 있습니다

출처

2015-01-14 05:18:01

마지막으로 누군가 내 코드가 원하는 것을 이해했습니다 ... 감사! 제 자신의 방식으로이 일이 가능합니까? – TraffyT

무엇을 의미합니까? –

createElement를 피하고 내가하려고 할 때 innerHTML에 전달하는 stings을 사용하십시오. – TraffyT

를 누를 때 동적으로 생성 According to MDN, Node.appendChild()은 Node 개체를 인수로 사용합니다. 마크 업 문자열에서 하나를 만들지 않으므로 직접 생성해야합니다.

document.createElement()을 사용하여 Node 개체를 만든 다음 원하는대로 innerHTML을 설정할 수 있습니다. Node이 원하는대로 설정되면 appendChild()을 사용하여 DOM에 추가 할 수 있습니다.

출처

2015-01-14 04:04:36

이것은 내가 추측 할 수있는 false입니다. 따라서 이전 div에 문자열을 추가하는 방법 .... var newNode = createElement ("div") ; newNode = str; for (var i = 0; i TraffyT

코드가 의미가 없습니다. div를 만든 다음 즉시 div로 바꾸십시오. –

appendChild()를 사용하려면 mehtod를 사용해야합니다. 먼저 element.createElement() 메서드를 사용하여 자식을 만들어야합니다. 코드에 집중하여 일부 문제가 발생했습니다. getElementsByClassName은 같은 클래스를 가진 모든 요소를 포함하는 노드리스트를 리턴합니다. 그래서 그것을 잡고 싶다면 인덱스를 제공하십시오. 인덱스가 하나 뿐이므로 [0] 인덱스를 제공하는 것이 좋습니다. 당신이) getElementsByClassName (의 인덱스를 제공하지 않는 경우

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

당신은 또한 당신이 그대로 for...in 루프 대신 루프 사용을 사용할 code.If에서이

newCategoryNode[0].innerHTMM=str

내가 for loop 제거에 액세스 할 수 있습니다 객체의리스트

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

당신은 입지 조건이 error.I've이 코드를 수정하고 당신이

  function addField() { 
 
\t \t \t 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> \t </br>', 
 
        '<hr/>', 
 
        '</div>'].join(''); 
 

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

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

을 원하는 당신에게 결과를 줄 수도 당신을 얻을 tag.That 귀하의 의견 중 하나에 관련 checkAll() 기능을 정의하지 않은

출처

2015-01-14 04:46:06

* "[...] getElementsByClassName은 배열"*을 반환합니다. 아니, 그것은'NodeList' 또는'HTMLCollection'을 반환합니다. 같은 배열을 통해 액세스하고 반복 할 수 있지만 배열 메서드가 없습니다. –

포인트 지적했다. 그것은 개체 같은 배열이라고 할 수 있습니까 ?? –

네! ........... –

getElementsByClassName 및 innerHTML

답변

관련 문제