Other Ways of Create Element using javascript

Question

I am trying to create a code editor, and I have gotten this far.

<p>Quick Tips: This is entirely HTML, so when working with javascript use ＜script＞ tags.<p>
<button onclick="runcode()">Run Code</button>
<br>
<textarea id="textarea" class:".lined" rows:"5" style="resize: none;" autofocus></textarea>
<script>
window.onerror = function(error) {
  // do something clever here
  alert("ERROR"); 
};
 function renderLineNumbers(element, settings) {
    element = $(element);

    var linesDiv = element.parent().find('.numberedtextarea-line-numbers');
    var count = element.val().split("\n").length;
    var paddingBottom = parseFloat(element.css('padding-bottom'));
    var j = 0;

    linesDiv.find('.numberedtextarea-number').remove();

    for (i = 1; i <= count; i++) {
      if (settings.labels && j == settings.labels.length) {
        j = 0;
      }
      var lineLabel = settings.labels ? settings.labels[j] : i;
      var line = $('<div class="numberedtextarea-number numberedtextarea-number-' + i + '">' + lineLabel + '</div>').appendTo(linesDiv);
      j++;

      if (i === count) {
        line.css('margin-bottom', paddingBottom + 'px');
      }
    }
  }

var asdf = document.getElementById('textarea');
function runcode() {
    console.log(document.createElement(asdf.value))
}
</script>
<style> 
textarea{
    height: 300px;
    width: 300px;
}
</style>

My text input: <p>asdf</p> returns the error:

Is there any way I can fix this? like another way to create an element using raw code?

.createElement expects a tag name, not a HTML string, as an argument. — Teemu
– Teemu, Commented Jun 9, 2020 at 6:21
You're trying to createElement with the value of the textarea , if you are trying to create another textarea tag you should just write document.createElement('textarea') — Bar Levin
– Bar Levin, Commented Jun 9, 2020 at 6:30
If you want to insert elements into the DOM based on arbitrary HTML, check out Element.insertAdjacentHTML: developer.mozilla.org/en-US/docs/Web/API/Element/… — Cat
– Cat, Commented Jun 9, 2020 at 6:36

mplungjan · Accepted Answer · 2020-06-09 06:32:40Z

1

You need a tagname in a createElement statement. You could do this:

const ta = document.getElementById("ta")

function runcode() {
  const div = document.createElement("div")
  div.innerHTML = ta.value;
  console.log(div.innerHTML); // rendered
  console.log(div.firstElementChild); // other notation
}
runcode()

<textarea id="ta"><p>Test a <span>span</span></p></textarea>

answered Jun 9, 2020 at 6:32

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

garritfra · Accepted Answer · 2020-06-09 06:36:36Z

0

Take a look at the MDN documentation for createElement. As Teemu pointed out in his comment, createElement expects a tag. You can go about it like this (Example taken from w3schools):

var p = document.createElement("p");          // Create a <p> element
p.innerHTML = "asdf";                         // Insert text
console.log(p);                               // Print the tag

// If you want to append the tag to the page:
document.body.appendChild(p);

answered Jun 9, 2020 at 6:36

garritfra

5795 silver badges23 bronze badges

1 Comment

mplungjan Over a year ago

the issue is that the textarea contains a complete html string

Collectives™ on Stack Overflow

Other Ways of Create Element using javascript

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