CODEWITHSUNDEEP
javascript
VGranin
VGranin

Reputation: 373

Insert new code to page using JS, with variables

I need to choose values in three text forms (a,b,c), for ex. 1,2,3. Then click ADD, and it will insert code like this: 

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

How can I do it? For a while trying different approaches.

Using this code I can add new element to the page

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

But how can I edit a, b and c values using text-form?

Thank you very much!

Upvotes: 0

Views: 61

Answers (2)

searsaw
searsaw

Reputation: 3622

If you have three textareas on the screen, you can get their values using JavaScript and then add them in your string instead of hardcoding them.

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

Upvotes: 1

Will Tate
Will Tate

Reputation: 33509

Assuming you would also like to be able to pass the values for a, b and c to the function and output them in the newly created DOM. You could do something like the following:

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

Appending additional elements each click:

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

Upvotes: 2

Related Questions