如何使用 .innerHTML 添加 html 标签？

Question

I have an element that I want to update the innerhtml text and icon but my tag is being ignored.

 document.getElementById("nextBtn").innerHTML = "Next
 <i class="icon icon--right icon-arrow-right"></i>";
}

Answer 1

You need to escape the inner double quotes " in your string, or change your outer quotes to single quotes ' ; Examples:

document.getElementById("nextBtn").innerHTML = "Next <i class=\"icon icon--right icon-arrow-right\"></i>";

document.getElementById("nextBtn").innerHTML = 'Next <i class="icon icon--right icon-arrow-right"></i>';

Answer 2

Your HTML string should be formatted with single quotes instead of double quote .

Current is:

 document.getElementById("nextBtn").innerHTML = "Next
 <i class="icon icon--right icon-arrow-right"></i>";

Change to:

document.getElementById("nextBtn").innerHTML = 'Next<i class = "icon icon--right icon-arrow-right" ></i>';

Answer 3

你必须用单引号代替双引号

document.getElementById("nextBtn").innerHTML = 'Next<i class = "icon icon--right icon-arrow-right" ></i>';