2

私は JavaScript が初めてで、現在課題があります。1 つの質問で、新しい textNode を<p>タグに追加するよう求められます。しかし、私のappendChildは機能したくありません。私の他のすべてのコードは正常に動作し、想定どおりに動作します。明らかに私は何か間違ったことをしています。

編集: コンソールでエラーが表示されます: Uncaught TypeError: Cannot call method 'appendChild' of null

<head>
<style type="text/css">
#demo {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
background-color: #996;
height: 25px;
width: 400px;
padding: 20px;
}
</style>
</head>

<body>

<p id = "demo">Existential div asks: &quot;Why I am I here?&quot;</p>

<script>

document.title="Tag, you're it!";

var parent=document.body;
var child=document.getElementById("demo");
parent.removeChild(child);

var para=document.createElement("p");
var node=document.createTextNode("The quick brown fox jumps over the lazy dog.");
para.appendChild(node);

var element=document.getElementById("demo");
element.appendChild(para);


with(para){
color: "#FFF";
fontFamily : "Arial";
backgroundColor: "#345";
fontSize: "30px";
textAlign: "center";
width: "600px";
height: "200px";
padding: "20px";
margin: "0px auto";
};


</script>
</body>
4

6 に答える 6

3

最初に要素を削除し、後で何かを追加しようとします。削除されたため、DOM で見つけることができなくなりました。

var child=document.getElementById("demo");
parent.removeChild(child);

var element=document.getElementById("demo"); // returns nothing, since it was removed
element.appendChild(para);

したがって、削除したくない場合は、単にその要素を削除しないでください。JSFiddle デモ。

于 2013-03-12T19:40:27.000 に答える
2

あなたの論理は間違っています。

これらの行で demo という要素を削除します

var child=document.getElementById("demo");
parent.removeChild(child);

次に、ここで削除したばかりのノードに子ノードを追加しようとします。

var element=document.getElementById("demo");
element.appendChild(para);

存在しない要素に要素を追加することはできません。行を削除するremoveChildと、すべてが機能するはずです。

また、 with ブロックが間違っているため、次のように変更する必要があります。

with(para.style){
    color = "#FFF";
    fontFamily = "Arial";
    backgroundColor = "#345";
    fontSize = "30px";
    textAlign = "center";
    width = "600px";
    height = "200px";
    padding = "20px";
    margin = "0px auto";
};

その後、すべてがうまくいくはずです。

于 2013-03-12T19:43:11.360 に答える
2

ここで要素を削除しています

var child=document.getElementById("demo");
parent.removeChild(child);

そして、ここでそれを使用しようとしています:

var element=document.getElementById("demo");
element.appendChild(para);
于 2013-03-12T19:40:27.483 に答える
1

（変数 child によって保持されている）を削除して<p id="demo">から、この要素に子を追加しようとしています（すでに削除されています）

この要素を削除することも、para要素を追加することもできませんparent

  1. 次の行を削除します。var element=document.getElementById("demo");
  2. element.appendChild(para);と置き換えますparent.appendChild(para);

すべてが正しく機能します。

于 2013-03-12T19:54:16.350 に答える
1

デモを削除してから、後で参照しようとしています。p#demo を破棄した後でも、試みているように見えることを行うためのよりクリーンな方法については、この jsFiddle を参照してください。

http://jsfiddle.net/FzBrS/

document.title="Tag, you're it!";

var demo = document.getElementById("demo");
demo.parentNode.removeChild(demo);
var p = document.createElement("p");

document.body.appendChild(p);

var tn = document.createTextNode("The quick brown fox jumps over the lazy dog.");
p.appendChild(tn);
于 2013-03-12T19:44:46.790 に答える
0

withブロックに構文エラーが含まれているため、スクリプトがまったく実行されません。

そのブロックを次のように変更します。

with(para.style) {
    color = "#fff";
    fontFamily = "Arial";
    // and so on
}
于 2013-03-12T19:37:57.167 に答える