JavaScriptを使用してWebページにhtmlを挿入するテキストボックスを作成する方法

Question

私は友人のためにXSSの脆弱なウェブサイトを作成しています。しかし、私は過去数日間の作成を試みてきましたが、それはうまくいきませんでした。私はちょうどそれを簡単にするために今持っていることは次のとおりです。

<input type="text" id="YourText"> 
<button onclick="myFunction()">Button</button> 

はJavaScript：

function myFunction() { 
    var btn = document.createElement("button"); 
    btn.appendChild(document.createTextNode(document.getElementById("YourText").value); 
    document.body.appendChild(btn); 
} 

あなたはボタンと呼ばれるボタンを押すと、だから何行うことになっていますが、それはあなたが入力したテキストとボタンを作成しています作成したIDを持つテキストボックスに入力します。しかし、これを実行すると何も起こりません。なぜか分からない。私は段落タグやスクリプトタグを使用していますが、作業はしていません。しかし、それは唯一の要素を作成しますが、ユーザからの入力を取ることはありません、このようなので、私はそれを作る場合：

function myFunction() { 
    var btn = document.createElement("button"); 
    btn.appendChild(document.createTextNode("Hi")); 
    document.body.appendChild(btn); 
} 

それだけで正常に動作します。 .valueを削除しようとしましたが、それでも動作しません。私が間違っていることを理解できないので、助けてください。

それのためのソースコードはここにある：代わりに

btn.appendChild(document.createTextNode(document.getElementById("YourText").value); 

のhttps://github.com/ninja25538/SuperCoolImageSiteThat-sNotAtAllVulnerable/blob/master/index.html

Answer 1

を試してみてください私はJavaScriptを使用したい

<script> 
function myFunction() { 
var val = document.getElementById("YourText").value; 
var x = "<input type=submit value="+val+"></input>"; 
document.getElementById("someDiv").innerHTML += x; 
} 
</script> 

Answer 2

は

btn.appendChild(document.createTextNode(document.getElementById("YourText").innerHTML);