Appending div in div doesn't work as expected

[Corobori]

I have got the following HTML

    <div id="container">
        <div id="myDiv"></div>
    </div>

I am wondering why when running this code

<script>
        $("#myDiv").append("<div class='row'>");
        $("#myDiv").append("<span>abc</span");
        $("#myDiv").append("</div>");
</script>

I am getting this

<div id="container">
        <div id="myDiv">
               <div class="row"></div>
               <span>abc</span>
         </div>
</div>

And not, what I was hoping, this:

<div id="container">
        <div id="myDiv">
			<div class="row">
				<span>abc</span>
			</div>
		</div>
</div>

See https://codepen.io/Corobori/pen/ZEyzJoZ

[Ray.H]

@Corobori

I am wondering why when running this code

<script>
        $("#myDiv").append("<div class='row'>");
        $("#myDiv").append("<span>abc</span");
        $("#myDiv").append("</div>");
</script>

Hi, It looks like you should be appending your span to .row rather than #myDiv

Try it like this…

$("#myDiv").append("<div class='row'>");
$(".row").append("<span>abc</span>");
$("#myDiv").append("</div>");

[Pepster64]

Here’s how you could do it in Vanilla JavaSript

myDiv = document.querySelector('#myDiv');
myClassRow = document.createElement('div');

mySpan = document.createElement('span');

myDiv.appendChild(myClassRow);
myClassRow.classList.add('row');
myClassRow.appendChild(mySpan);

mySpan.textContent = "ABC";

However, it plays funny using jQuery and Bootstrap (?), but that might just be CodePen

https://codepen.io/Strider64/pen/jOwNxQe

Though doing it in JQuery takes less code in JavaScript and is a little easier to read.

[Corobori]

Thank you, but I have to do it Jquery, the code I posted was actually a simulation of a more complex code.

[Corobori]

@Ray.H

$("#myDiv").append("<div class='row'>");
$(".row").append("<span>abc</span>");
$("#myDiv").append("</div>");

Thank you for your code

The final version will be as shown below

$("#myDiv").append("<div class='row'>");
$(".row").append("<div class='col-lg-12'><span>abc</span></div>");
$("#myDiv").append("</div>");

[PaulOB]

Couldn’t you just use one append to save three trips to the page?

e.g.

var myhtml = "<div class='row'>" + "<span>abc</span></div>"
$("#myDiv").append(myhtml);

[Corobori]

@PaulOB

var myhtml

Sure can ! Thank you.