Filling <code> with a string by JavaScript-CodePudding

I'm trying to fill a HTML < code > tag with a JavaScript string. This messes up the format and makes the whole code appear in a single line thats scrollable. When I fill the < code > tag in HTML directly the proper line breaks are displayed.

I'm using hljs to highlight key words in the code

function addNewCodeObject() {
let n = document.createElement("div")
let p = document.createElement("p")
let pre = document.createElement("pre")
let code = document.createElement("code")

n.classList.add("code-container")
p.classList.add("code-content")

    code.innerText = "public class SwapNumbers {\n"  
    "\n"  
    "    public static void main(String[] args) {\n"  
    "\n"  
    "        float first = 1.20f, second = 2.45f;\n"  
    "\n"  
    "        System.out.println(\"--Before swap--\");\n"  
    "        System.out.println(\"First number = \"   first);\n"  
    "        System.out.println(\"Second number = \"   second);\n"  
    "\n"  
    "        // Value of first is assigned to temporary\n"  
    "        float temporary = first;\n"  
    "\n"  
    "        // Value of second is assigned to first\n"  
    "        first = second;\n"  
    "\n"  
    "        // Value of temporary (which contains the initial value of first) is assigned to second\n"  
    "        second = temporary;\n"  
    "\n"  
    "        System.out.println(\"--After swap--\");\n"  
    "        System.out.println(\"First number = \"   first);\n"  
    "        System.out.println(\"Second number = \"   second);\n"  
    "    }\n"  
    "}"

pre.appendChild(code)
p.appendChild(pre)
n.appendChild(p)


document.getElementById("entire-thing").append(n)
hljs.highlightAll()

}

This makes the code appear in a single line

    <div  id="cont">
    <p >
        <pre>
            <code id="mycode">
public class SwapNumbers {

    public static void main(String[] args) {

        float first = 1.20f, second = 2.45f;

        System.out.println("--Before swap--");
        System.out.println("First number = "   first);
        System.out.println("Second number = "   second);

        // Value of first is assigned to temporary
        float temporary = first;

        // Value of second is assigned to first
        first = second;

        // Value of temporary (which contains the initial value of first) is assigned to second
        second = temporary;

        System.out.println("--After swap--");
        System.out.println("First number = "   first);
        System.out.println("Second number = "   second);
    }

This works as intended, but its obiously just HTML and and no JS is used I've tried replacing the \n with
but that doesn't work

Thanks for any advice

CodePudding user response：

Here's a snippet that reproduces your HTML above, mostly, but adds the appropriate closing brace for the (Java?) code and closing tags for the HTML. It looks fine to me (run it and see).

Is this different from what you want? I would normally have asked in a comment on the question but wanted to use a snippet so I had to submit this as an "answer."

    <div  id="cont">
    <p >
        <pre>
            <code id="mycode">
public class SwapNumbers {

    public static void main(String[] args) {

        float first = 1.20f, second = 2.45f;

        System.out.println("--Before swap--");
        System.out.println("First number = "   first);
        System.out.println("Second number = "   second);

        // Value of first is assigned to temporary
        float temporary = first;

        // Value of second is assigned to first
        first = second;

        // Value of temporary (which contains the initial value of first) is assigned to second
        second = temporary;

        System.out.println("--After swap--");
        System.out.println("First number = "   first);
        System.out.println("Second number = "   second);
    }
}
          </code>
        </pre>
      </p>
      </div>

CodePudding user response：

I figured out what the problem was. I need to use code.innerHTML instead of code.innerText