入力値をもとにHTML文字列を組み立てる場合には、createElement/createTextNodeメソッドを使用すべきであり、textContentプロパティは使えません。
このような記述が教科書にあったのですが、よく分かりません。というのも、
html
1<form> 2 <div> 3 <label for="name">サイト名: </label><br> 4 <input id="name" name="name" type="text" size="30"> 5 </div> 6 <div> 7 <label for="url">URL: </label><br> 8 <input id="url" name="url" type="url" size="50"> 9 </div> 10 <div> 11 <input id="btn" type="button" value="追加"> 12 </div> 13 </form> 14 <div id="list"></div>
javascript
1document.addEventListener("DOMContentLoaded", function() { 2 document.getElementById("btn").addEventListener("click", function() { 3 let name = document.getElementById("name"); 4 let url = document.getElementById("url"); 5 6 let anchor = document.createElement("a"); 7 anchor.href = url.value; 8 let text = document.createTextNode(name.value); 9 anchor.appendChild(text); 10 let list = document.getElementById("list"); 11 list.appendChild(anchor); 12 }, false); 13 }, false);
このようなコードを実行させ、例えば、サイト名に<h1>test</h1>と入力すると、追加ボタンの下に<h1>text</h1>という文字列がそのまま出力されます。
しかし、このjavascriptのコードは、
javascript
1document.addEventListener("DOMContentLoaded", function() { 2 document.getElementById("btn").addEventListener("click", function() { 3 let name = document.getElementById("name"); 4 let url = document.getElementById("url"); 5 6 let anchor = document.createElement("a"); 7 anchor.href = url.value; 8 //以下、変更箇 9 anchor.textContent = name.value; 10 list.appendChild(anchor); 11 }, false); 12 }, false);
のようにもかけると思うのですが、どうでしょうか。
このような記述だと何か問題はありますでしょうか。
回答3件
あなたの回答
tips
プレビュー