Question

我有一个奇怪的问题。一般来说，当我将变量设置为textContent时，它会显示它，但当我将其设置为innerHTML

时它不会显示

更准确地说

这是HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dynamic Menu</title>
</head>
<body id="top">
    <h1>The Extremadura Region of Western Spain</h1>
    <h2 >Geography Of The Region</h2>
    <p>The autonomous community of Extremadura is in western Spain alongside the Portuguese border.
    It borders the Spanish regions of Castilla y Leon, Castilla La Mancha and Andalucía as well as Portugal (to the West). 
    Covering over 40,000 square kilometers it has two provinces: Cáceres in the North and Badajoz in the South.</p>

    <h2>Where To Stay</h2>
    <p>There is a wide range of accommodation throughout Extremadura including small inns and guest houses ('Hostals') or 
    think about renting a 'casa rural' (country house) if you are travelling in a group.</p>

    <h2>Climate</h2>
    <p>Generally Mediterranean, except for the north, where it is continental. Generally known for its extremes,
    including very hot and dry summers with frequent droughts, and its long and mild winters.</p>

    <h2>What To See</h2>
    <p>Extremadura hosts major events all year round including theater, music, cinema, literature and folklore. 
    Spectacular venues include castles, medieval town squares and historic centers.
    There are special summer theater festivals in the Mérida, Cáceres, Alcántara and Alburquerque.</p>

    <h2>Gastronomy</h2>
    <p>The quality of Extremaduran food arises from the fine quality of the local ingredients. 
    In addition to free-range lamb and beef, fabulous cheeses, red and white wines, olive oil, honey and paprika,
    Extremadura is particularly renowned for Iberian ham. The 'pata negra' (blackfoot) pigs are fed on acorns in the
    cork-oak forests, the key to producing the world's best ham and cured sausages.</p>

    <script src="lunch.js"></script>
</body>
</html>

这是脚本

function lop(){

var hs = document.getElementsByTagName('h2');
for(var g = 0; g<hs.length; g++){
    hs[g].setAttribute('id', g);
}
var budy = document.getElementById('top');   //Gets the body id
var nnn = document.createElement('nav');   //Creats a nav event
var uuu = "<ul >  \
                <li id='one'> <a href='#0'>Geography Of The Region </a> </li>  \
                <li id='two'> <a href='#1'>Where To Stay </a> </li>  \
                <li id='tre'> <a href='#2'>Climate </a> </li>   \
                <li id='for'> <a href='#3'>What To See</a> </li>  \
                <li id='fiv'> <a href='#4'>Gastronomy</a> </li>";
// li: 55-60 make the HTML              
nnn.innerHTML = uuu;     //Sets the HTML to the nav
var h = document.getElementsByTagName('h2')[0]; // Get the specific element
budy.insertBefore(nnn, h);  // inserts the element nav and the whole html before h

var ps = document.getElementsByTagName('p');
var hih = '<a href="#top"> AAAAA </a>';
for(var g = 0; g<ps.length; g++){
    ps[g].nextSibling.innerText = hih;
}

}

lop();  //cals the function so it executes

基本上，在本练习中，我必须在脚本中创建一个ul，而不会使HTML格式化。

我成功创建了ul。然后我必须创建一个链接，将我带到页面顶部。这是这一部分：

var ps = document.getElementsByTagName('p');
var hih = '<a href="#top"> AAAAA </a>';
for(var g = 0; g<ps.length; g++){
    ps[g].nextSibling.innerText = hih;
}

在这里，我尝试创建一个链接，让我回到顶部。我利用铬的优势，让兄弟们在那里创造那个链接。

问题在于它没有表现出来。当我去调试器时，我没有错误，但没有错误。如果更改ps[g].nextSibling.innerText = hih; .textContent，则会显示整个想法。

我知道.innerHTML和.textContent（或者我认为）之间的区别，那么为什么它不会显示我的链接并且可以让它显示出来？

Answer 1

我不明白你使用nextSibling。如果您想使用innerHTML，可以使用以下脚本

ps[g].innerHTML = ps[g].innerHTML + hih;

您可以在https://www.w3schools.com/jsref/prop_node_nextsibling.asp

中了解nextSibling

Answer 2

好的，我的一个朋友改变了我的程序，在这里他做了什么：

var ps = document.getElementsByTagName('p');
var hih = '<br /><br /><a href="#top"> To the top </a> ';

for(var g = 0; g<ps.length; g++) {
    ps[g].innerHTML += hih;
}

换句话说，我从这3h的js中学到的是，你不能改变一个空白孩子的HTML，而只能改变他的文本。

Javascript：我的.textContent有效，但不是我的innerHTML

2 个答案: