D3.js - Add elements in HTML - <script></script> location

Question

I was working with the following tutorial of D3.js: https://www.tutorialspoint.com/d3js/index.htm.

My issue is as follows:

I'm aware of that the location inside the HTML is at the end of the . I mean, I usually put it here:

<body>
     <!-- HTML code -->

<script>
     <!-- JS code or external JS link -->
</script>
</body>

With this practice, what I'm looking is to run JS after the HTML content renders.

But! When I follow this practice using D3.js, what I discover is that D3.js renders what I add (using d3("html").append(something to append), after the script tags.

For example!

<!DOCTYPE html>
<head>
    <title>D3.js Test</title>
</head>
<body>
<div class="div_test">
    <h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>

<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<script>
    d3.select("html").append("p").text("I get this text after the script tags");
</script>
</body>
</html>

I'm getting the content as follows:

<!DOCTYPE html>
<html>
<head>
    <title>D3.js Test</title>
</head>
<body>
<div class="div_test">
    <h1>I want the D3.js content after this div (but not inside the div)</h1>
</div>

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script>
    d3.select("html").append("p").text("I get this text after the script tags");
</script>`
</body><p>I get this text after the script tags</p></html>

Questions!

Is the position of the tag correct?
Is there a possibility to keep the flow without adding a to anchor the expected new tag?

Thanks!!!

altocumulus · Accepted Answer · 2022-03-23 15:21:51Z

1

You can use selection.insert() to insert an element instead of appending it to the DOM. The second argument to that method determines where the newly created element is put into the DOM tree. If you just want to put it in front of the first <script> element you can do something like:

d3.select("body").insert("p", "script")   // <-- insert before first <script>

If you need to place it after the <div>, no matter what the next element might look like, you can use the adjacent sibling combinator to select the sibling element directly following the <div> like so:

d3.select("body").insert("p", "div + *")  // <-- insert before next element following div

answered Mar 23, 2022 at 15:21

altocumulus

21.7k13 gold badges65 silver badges86 bronze badges

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

1 Comment

Roberto Sebastián Pepey Over a year ago

Thanks! It worked. I was working with append. I'm reading how to work with the d3.insert method.

Collectives™ on Stack Overflow

D3.js - Add elements in HTML - <script></script> location

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related