0

我有一个奇怪的问题。一般来说，当我将变量设置为 时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;
}

在这里，我尝试创建一个链接，让我回到顶部。我利用 chrome 在兄弟姐妹之间有空白空间的优势在其中创建该链接。

问题是它没有显示。当我去调试器时，我没有错误，但什么也没显示。如果改变ps[g].nextSibling.innerText = hih; 它.textContent显示了整个想法。

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

4

2 回答 2

1

我不明白你用nextSibling. 如果你想使用innerHTML，你可以使用下面的脚本

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

您可以阅读nextSiblinghttps://www.w3schools.com/jsref/prop_node_nextsibling.asp

于 2017-03-09T03:41:00.320 回答
0

好的，所以我的一个朋友改变了我的程序，他做了什么：

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，而只能改变他的文本。

于 2017-03-09T04:33:19.353 回答