divs와 span을 동적으로 추가 할 수 없습니다.

Question

div 코드가 y 인 HTML 코드를 작성했습니다.이 코드는 HTML 본문에 있으며 버튼이 있습니다. 사용자가이 버튼을 클릭하면 아래 작업을 수행하려고합니다.

1. 나는 3 개 스팬을 만들려면,이 div 내부 (smallBar 같은 클래스) 다른 사업부
2. 을 만듭니다.
3. y으로 divide 콘텐츠를 추가하십시오 (총 smallBar).

다음은 현재 코드입니다.

내가 대신이 [object HTMLDivElement]로 나에게 메시지를주고있다 div을 만드는, 버튼을 클릭 HTML

<div class="y" id="y"> 

</div> 
<input type="button" onclick="createDiv()" value="click me" /> 

JS 여기

function createDiv() { 
    var div = document.createElement("div"); 
    div.className = "smallBar"; 
    var span1 = document.createElement("span"); 
    span1.className = "span1"; 
    var span2 = document.createElement("span"); 
    span2.setAttribute("class", "span1"); 
    var span3 = document.createElement("span"); 
    span3.setAttribute("class", "span1"); 

    div.appendChild(span1); 
    div.appendChild(span2); 
    div.appendChild(span3); 

    document.getElementById("y").innerHTML = div; 
} 

. 내가 잘못 가고있는 곳을 알려주십시오. 어떻게 해결할 수 있습니까?

다음은 직접 div 요소를 할당하는

document.getElementById("y").innerHTML = div.innerHTML; 

이어야한다 나의 바이올린 https://jsfiddle.net/d9hg0vkk/

감사

Answer 1

입니다. 당신은 당신이 버튼을 클릭하고 요소를 검사하고보고 일단은 innerHTML을

https://jsfiddle.net/d9hg0vkk/2/

의 가야로 어디. 타겟 div의 스팬을 봅니다.

function createDiv() { 
 
    var div = document.createElement("div"); 
 
    div.className = "smallBar"; 
 
    var span1 = document.createElement("span"); 
 
    span1.className = "span1"; 
 
    span1.textContent= "span1" 
 
    var span2 = document.createElement("span"); 
 
    span2.setAttribute("class", "span1"); 
 
    span2.textContent= "span2" 
 
    var span3 = document.createElement("span"); 
 
    span3.setAttribute("class", "span1"); 
 
    span3.textContent= "span3" 
 

 
    div.appendChild(span1); 
 
    div.appendChild(span2); 
 
    div.appendChild(span3); 
 

 
    document.getElementById("y").innerHTML = div.innerHTML; 
 
}

<div class="y" id="y"> 
 

 
</div> 
 
<input type="button" onclick="createDiv()" value="click me" />

아니면 전체 사업부를 추가하려는 경우, 당신은 다른 사람이 같이하려고

document.getElementById("y").appendChild(div); 

Answer 2

를 지적에 appendChild를 사용하여 시도 할 수 있습니다?

document.getElementById("y").innerHTML = "<div>ABC</div>"; 

링크 :https://jsfiddle.net/d9hg0vkk/1/

Answer 3

당신은 innerHTML를 사용하는 대신에 당신은 appendChild()

function createDiv() { 
 
    var div = document.createElement("div"); 
 
    div.className = "smallBar"; 
 
    var span1 = document.createElement("span"); 
 
    span1.className = "span1"; 
 
    span1.innerHTML="Spam1"; 
 
    var span2 = document.createElement("span"); 
 
    span2.setAttribute("class", "span2"); 
 
    span2.innerHTML="Span2"; 
 
    var span3 = document.createElement("span"); 
 
    span3.setAttribute("class", "span3"); 
 
    span3.innerHTML="Span3"; 
 

 
    div.appendChild(span1); 
 
    div.appendChild(span2); 
 
    div.appendChild(span3); 
 

 
    document.getElementById("y").appendChild(div); 
 
}

<div class="y" id="y"> 
 

 
</div> 
 
<input type="button" onclick="createDiv()" value="click me" />

P.S를 사용할 필요가 - innerHTML을 줄 s /는 요소의 HTML 내용을 나타내는 String을 설정합니다. document.getElementById("y").innerHTML = div을 수행하면 Object가 아닌 String으로 간주되므로 div에 [object HTMLDivElement]이 표시됩니다.당신이 innerHTML을하지가 DIV 당신이 버튼을 클릭 할 때마다 추가하는에 appendChild 사용하려면 대신이 document.getElementById("y").innerHTML = div.outerHTML;

Read More about innerHTML

Answer 4

처럼 innerHTML 함께 할 수있는, 당신은

document.getElementById("y").innerHTML = div.outerHTML; 

을 사용해야합니다 대신

document.getElementById("y").innerHTML = div; 

의

'DIV'는 HTMLDivElement와 객체이며 innerHTML을 단지 스트 받아들 때문에 ng. outerHTML을 사용하면 'smallBar'Div도 유지할 수 있습니다. 을 (를) 사용하는 경우

div 'y'에는 3 개의 span 만 표시되며 'smallBar'Div는 표시되지 않습니다.