変数を使用してJSを使用してページに新しいコードを挿入

Question

3つのテキスト形式（a、b、c）で値を選択する必要があります。 1,2,3。次に、[追加]をクリックすると、次のようなコードが挿入されます。

<mycode a="1" b="2"><newone c="3"></newone></mycode> 

どうすればいいですか？異なるアプローチを試みながらしばらくの間。

私はページ

<p> <span id="mytext"><a href="javascript:EditText()">click here</a></span></p> 
<script type="text/javascript"> 
    function EditText() { 
     document.getElementById('mytext').innerHTML = '<mycode a="1" b="2"><newone c="3"></newone></mycode>'; 
    } 
</script> 

に新しい要素を追加することができ、このコードを使用するしかし、どのように私は、テキスト形式を使用して、b、cの値を編集することができますか？

ありがとうございました！

Answer 1

a、b、cの値を関数に渡して、新しく作成したDOMに出力することもできると仮定します。各クリック

function EditText(aVal, bVal, cVal) { 
    document.getElementById('mytext').innerHTML = '<mycode a="'+aVal+'" b="'+bVal+'"><newone c="'+cVal+'"></newone></mycode>'; 
} 

を追加は追加要素：あなたは、次のような何かを行うことができますが、画面上の3 textarea秒を持っている場合は

function EditText(aVal, bVal, cVal) { 
    var currentInnerHtml = document.getElementById('mytext').innerHTML; 
    document.getElementById('mytext').innerHTML = currentInnerHtml + '<mycode a="'+aVal+'" b="'+bVal+'"><newone c="'+cVal+'"></newone></mycode>'; 
} 

Answer 2

を、あなたはそれらの値はJavaScriptを使用して、その後にそれらを追加取得することができますあなたの文字列をハードコーディングする代わりに。

<textarea id="textA" cols="30" rows="10"></textarea> 
<textarea id="textB" cols="30" rows="10"></textarea> 
<textarea id="textC" cols="30" rows="10"></textarea> 
<p> <span id="mytext"><a href="javascript:EditText()">click here</a></span></p> 

<script> 
    function EditText() { 
    var textA = document.getElementById('textA').value; 
    var textB = document.getElementById('textB').value; 
    var textC = document.getElementById('textC').value; 

    document.getElementById('mytext').innerHTML = '<mycode a="' + textA + '" b="' + textB + '"><newone c="' + textC + '"></newone></mycode>'; 
    } 
</script>