Member Avatar for ErlendHL

Hi!
My append code works for Firefox and Internet Explorer but not for Opera and Google Chrome.

is the test page.

In Opera I get this error in Dragonfly:

Uncaught exception: [object DOMException]

Error thrown at line 3, column 16 in append(id, text) in 
    var je = document.createElement('<span>');
called from line 7, column 12 in 
    append("1", "lol")

Please help me, thanks! :)

  • 1 Contributor
  • 1 Reply
  • 107 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ErlendHL

Dani AI

Generated

— that was the right fix. The DOM method expects a tag name (for example span), not HTML markup with angle brackets; passing markup can cause a DOMException in browsers that follow the spec strictly (Chrome/Opera), while some other engines are more forgiving. See Document.createElement.

A safe, cross-browser pattern is: create the element node, set its text (use textContent or createTextNode to avoid parsing HTML), then append the node to the parent. For example:

var parent = document.getElementById('1');
var span = document.createElement('span');
span.textContent = 'lol'; // safer than inserting HTML
parent.appendChild(span);

If the content you must insert is HTML (not plain text), parse it explicitly instead of passing markup into createElement. Use insertAdjacentHTML or Range.createContextualFragment to convert a string of HTML into nodes, and never insert untrusted user input without sanitizing first (XSS risk). See Element.insertAdjacentHTML and Range.createContextualFragment.

Also note: namespaced elements (SVG/MathML) require createElementNS, and older IE may need innerText fallback when textContent is missing. For predictable behavior across browsers, prefer creating nodes and setting text/node values rather than trying to hand HTML markup to createElement.

Member Avatar for ErlendHL

Oh, it worked when I removed the < > in the document.createElement part!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.