如何在JavaScript中将HTML标签替换为另一个

Question

I am new with js and playing with replace method. I have had no problems when replacing string for another string etc., but when im trying to do same with tags nothing happens..

Im trying to replace every

tags for -tags. My function is below:

 function bonus() { var list = document.getElementsByTagName('li'); for (var i = 0; i < list.length; i++) { newList = document.getElementsByTagName('li')[i].innerHTML; newList = newList.replace('<li>', '<strong>'); newList = newList.replace('</li>', '</strong>'); document.getElementsByTagName('li')[i].innerHTML = (newList); //console.log(newList); } } 

Answer 1

 function bonus(){ var list=document.getElementsByTagName('li'); var len = list.length; for(var i=len-1; i>-1; i--){ var tmpItem = list[i] newList = tmpItem.outerHTML; newList = newList.replace('<li>','<strong>'); newList = newList.replace('</li>','</strong>'); tmpItem.outerHTML = newList; } } 

I thought you might change your code like above, and there was still much space to optimize your code. go ahead <(￣︶￣)>

Answer 2

First of all you should never replace a list-item with another element like that. A list item must always be a child of an ul or ol elelment, and ul and ol elements should not have any other immediate child that isn't a li.

However, this doesn't work because the li is an html element and not a text string and the inner HTML of an html elemnt doesn't contain the tag itself. It may contain children and those children's tags are part of the innerHTML, everything inside the element/tag itself is the innerHTML.

An example to clarify:

<ul>
    <li>one<strong>second one</strong></li>
    <li>two<strong>second two</strong></li>
    <li>three<strong>second three</strong></li>
    <li>four</li>
</ul>

Looping through all list items accessing elements as you've describe

for(var i=0; i<list.length;i++) {
    console.log("==>> " + document.getElementsByTagName("li")[i].innerHTML);
}

Will output the following to the console:

 ==>> one<strong>second one</strong>

 ==>> two<strong>second two</strong>

 ==>> three<strong>second three</strong>

 ==>> four

If you want to make all li elements strong they should be nested as this:

<li><strong>Some text</strong></li>

To Achieve this one way to do it would be:

var list = document.getElementsByTagName("li");

for(var i=0; i<list.length; i++) {
    var listItem = list[i];
    listItem.innerHTML = "<strong>" + listItem.innerHTML + "</strong>";
}

If you want to convert all li elements to strong elements you must first remove them from the list...

Answer 3

Thanks alot for all of you. I knew that i can't change li for strong in real world, but i just tried to figure out if its possible to do so with simple loop.

My example html is full of lists, so thats why i used li instead of h2 to h3 or something like that. Outer html was new thing for me, and solution for this one. However Kim Annikas answer helped me with other question about modifying lists: I did this:

function replace(){

var list=document.getElementsByTagName('li');
for(var i=0;i<list.length;i++){
newText="<strong>Replaced!</strong>";
var listItem=list[i];
listItem.style.color="red";
listItem.innerHTML=newText;

} }

..and now it seems that i have learnt how to modify tags as well as text inside of it ;)