How to add &emsp; using appendChild in JavaScript?-CodePudding

Let's say I want to append a pattern like this in the DOM:

*
*    *
*    *    *
*    *    *    *

My JavaScript code looks like this:

function tri1()
{
    let rows=document.getElementById("upperTri").value;
    for(let i=1; i<=rows; i  )
    {
        for (let j=1; j<=i; j  )
        {
            document.getElementById("resTri1").appendChild(document.createTextNode(star));
        }
        document.getElementById("resTri1").appendChild(document.createElement("br"));
    }
}
var star="*";

The thing is that I want to insert em space after each asterisk printed in the pattern, but HTML doesn't let one add more than one space unless it's an &emsp;, etc. But I couldn't find any way to appendChild() the emspace &emsp; in the DOM. It just prints the text &emsp; instead of the em space.

Any solution to this?

My HTML code:

<html>
<head>
    <title>Pattern</title>
    <script type="text/javascript" src="PB220322.js"></script>
</head>
<body>
    <h1>JS Lab Session 22-03-22</h1>
    <fieldset>
        <legend><h2>Left Triangle</h2></legend>
        <label for="upperTri">Enter the number of rows:</label>
        <input type="number" name="upperTri" id="upperTri" onchange="tri1()">
        <input type="submit" value="Enter" onsubmit="tri1()">
        <div id="resTri1"></div>
    </fieldset>
</body>
</html>

CodePudding user response：

Append to the innerHTML of the parent element after appending the text node:

function tri1()
{
    let rows=document.getElementById("upperTri").value;
    for(let i=1; i<=rows; i  )
    {
        for (let j=1; j<=i; j  )
        {
          
            let elem = document.getElementById("resTri1")
            elem.appendChild(document.createTextNode(star));
            elem.innerHTML  = "&emsp;"
        }
        document.getElementById("resTri1").appendChild(document.createElement("br"));
    }
}
var star="*";

<html>
<head>
    <title>Pattern</title>
</head>
<body>
    <h1>JS Lab Session 22-03-22</h1>
    <fieldset>
        <legend><h2>Left Triangle</h2></legend>
        <label for="upperTri">Enter the number of rows:</label>
        <input type="number" name="upperTri" id="upperTri" onchange="tri1()">
        <input type="submit" value="Enter" onsubmit="tri1()">
        <div id="resTri1"></div>
    </fieldset>
</body>
</html>

CodePudding user response：

Really quick:

Inline event handlers are garbage so in the example that onchange and onsubmit have been replaced with .addEventListener().

.createTextNode() is quite antiquated, albiet very stable, it renders text not HTML. .innerHTML and .textContent can destroy content if it isn't appended with a = operand. There is a method that isn't destructive and very versatile: .insertAdjacentHTML(). The Unicode characters you are trying to use can be in different formats:

// HTML Decimal & Hexidecimal
&ast;&emsp;
// CSS
\00002a\002003
// JavaScript
\u002a\u2003

&ast;&emsp; needs to be rendered as HTML so methods such as .insertAdjacentHTML() is ideal, but more often you'll see .innerHTML being used despite it's limitations.

The example below employs some useful interfaces from the HTML DOM API. There are extensive details commented in the example -- the following list are references pertaining to those comments:

^{Note: in the example the "stars" are just a fancier asterisk ❉.}

// Event handler passes the Event Object
function tri(e) {
  /*
  Stop the default behavior of form#UI✺ during a "submit" event.
  */
  e.preventDefault();

  // Create a HTMLFormControlsCollection