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;
}

ここで、トップに戻るリンクを作成しようとします。クロムには兄弟の間に空白があるという利点を利用して、そこにそのリンクを作成します。

問題はそれが表示されないことです。デバッガーに移動すると、エラーはありませんが、何も表示されません。それが全体の考えを示している場合は変更ps[g].nextSibling.innerText = hih; します。.textContent

.innerHTMLと(または私が思う)の違いを知っている.textContentのに、リンクが表示されないのはなぜですか?

4

2 に答える 2