자바 스크립트에서 현재 요소에 HTML 요소를 덧붙이는

Question

내 코드는

function addElem(){ 
 
    var mElem = document.querySelector('.post_description') 
 
    var hElems = document.getElementsByTagName('H3'); 
 
    var $index=1; 
 
    
 
    var node = document.createElement("a"); 
 
    for(var i=0;i<hElems.length;i++){ 
 
    //console.log(hElems[i].innerHTML); 
 
    var textnode = document.createTextNode(hElems[i].innerHTML); 
 
    var cloneElem = node.cloneNode(true); 
 
    cloneElem.appendChild(textnode); 
 
    mElem.appendChild(cloneElem); 
 
    mElem.appendChild($index++); 
 
    } 
 
}; 
 

 
addElem()

.post_description{ 
 
    height: 150px; 
 
    width:150px; 
 
    background-color:green; 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
} 
 

 
.post_description a{ 
 

 
display:block; 
 
}

<div class="mg_post_description"> 
 
<div class="main_body"> 
 
    <h3>Testing one</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. ng essentially unchanged</p> 
 

 
    <h3>Testing two</h3> 
 
    <p>Lorem Ipsum is simply Lorem including versions of Lorem Ipsum.</p> 
 

 

 
    <h3>Testing three</h3> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem of Lorem Ipsum.</p> 
 

 
</div> 
 
    </div> 
 

 
<div class="post_description"></div>

여기

나는 내용에서 H3 태그를 추출한 아래에 주어진하고 'post_description'에서 생성 된 태그에 추가 div. 반복의 태그 앞에 번호 카운터를 추가하고 싶습니다. 의미, 첫 번째 태그는 1을 누른 다음에 켜집니다.

$ index = 1을 사용하려고 시도한 다음 $ index ++를 추가하려고 시도했습니다.

그러나 a 또는 p 태그 안에 색인 번호를 추가하고 싶습니다. 이것을 어떻게 할 수 있는가? 기대

감사

제프

Answer 1

function addElem() { 
 
    var mElem = document.querySelector('.post_description'); 
 
    var hElems = document.getElementsByTagName('H3'); 
 

 
    for (var i = 0; i < hElems.length; i++) { 
 
    var node = document.createElement("a"); 
 
    node.innerHTML = i + 1 + '. ' + hElems[i].innerHTML; 
 
    mElem.appendChild(node); 
 
    } 
 
}; 
 

 
addElem()

.post_description { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: green; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.post_description a { 
 
    display: block; 
 
}

<div class="mg_post_description"> 
 
    <div class="main_body"> 
 
    <h3>Testing one</h3> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. ng essentially unchanged</p> 
 

 
    <h3>Testing two</h3> 
 
    <p>Lorem Ipsum is simply Lorem including versions of Lorem Ipsum.</p> 
 

 

 
    <h3>Testing three</h3> 
 

 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem of Lorem Ipsum.</p> 
 

 
    </div> 
 
</div> 
 

 
<div class="post_description"></div>

01 아이로 추가

Answer 2

span 요소를 생성 시도하고 루프 인

var spanElem = document.createElement("span"); 
var cloneElem = node.cloneNode(true); 
spanElem.innerHTML = $index++; 
cloneElem.href = "somelink url" 
cloneElem.appendChild(spanElem); 
mElem.appendChild(cloneElem);