Insert new code to page using JS, with variables

Question

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!

Mind if I ask what "text-form" is? When you say "in three text forms", are they simply <input type="text" id="a" />? — Zach
– Zach, Commented Jul 6, 2016 at 20:14

Will Tate · Accepted Answer · 2016-07-06 20:14:54Z

2

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

answered Jul 6, 2016 at 20:14

Will Tate

33.5k9 gold badges80 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

searsaw · Accepted Answer · 2016-07-06 20:18:14Z

1

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>

answered Jul 6, 2016 at 20:18

searsaw

3,65226 silver badges32 bronze badges

1 Comment

VGranin Over a year ago

Thank you for your help!

Collectives™ on Stack Overflow

Insert new code to page using JS, with variables

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related