Concatenate HTMLScriptElement

Question

Given that i have the following:

var el, main;

main = _.findWhere(this.widget.snippets, {
  name: "main"
});

el = document.createElement("script");

el.setAttribute("data-require", value.name + "@*");

el.setAttribute("data-semver", a.semver);

el.setAttribute("src", a.scripts);

console.log(el + main.body);
/*
  [object HTMLScriptElement]
  <div bb-breadcrumb></div>
  <div bb-content></div>
 */

I am trying to append my newly created script to my body. However it keeps returning [object HTMLScriptElement] is there not a way that i convert this to a string which will then allow me to do the concatenation.

Further update:

The value of the var main is an object that looks like the following:

$$hashKey: "018"
body: "<div breadcrumb></div>↵<div content></div>↵"
file_extension: "html"
file_name: "main"
isEdited: false
name: "main"

So with this at hand. You will see that I create an <script></script> element for which outputs:

<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Now towards the end of the code sample I initially provided I want to concatenate that tag and append it to the main.body so the end output would look like:

<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div breadcrumb></div> 
  <divcontent></div>

Your question is missing a lot of important context. There are undeclared variables used and the types of your objects are not known. Can you provide some more detail and produce a self-contained example? Perhaps a JSFiddle would help to demonstrate your problem. — Tom Fenech
– Tom Fenech, Commented Aug 8, 2014 at 11:05
@TomFenech i haave updated my question which should provide more information. — user532339
– user532339, Commented Aug 8, 2014 at 11:15

Tom Fenech · Accepted Answer · 2014-08-08 11:51:47Z

2

If main.body is a string, you cannot concatenate an object to it. However, you can use the .outerHTML property of your newly created element, which is the HTML representation:

el = document.createElement("script");
el.setAttribute("data-require", value.name + "@*");
el.setAttribute("data-semver", a.semver);
el.setAttribute("src", a.scripts);
main.body = el.outerHTML + main.body;
console.log(main.body)

Output:

<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div bb-breadcrumb></div>↵<div bb-content></div>↵

See it on JSFiddle

edited Aug 8, 2014 at 11:51

answered Aug 8, 2014 at 10:40

Tom Fenech

75.1k13 gold badges119 silver badges154 bronze badges

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

5 Comments

user532339 Over a year ago

Please see my update to my question. I get precisely what your code does. It finds the element test, create a new div you put some content in that div and then insert it before the id test

Tom Fenech Over a year ago

Please see my updated answer and accompanying JSFiddle, I believe that it does what you want.

user532339 Over a year ago

outerHTML was exactly what i needed. Think a better explanation would've been to just say i need a dump of the HTMLScript element as a string

user532339 Over a year ago

is there not a way to format it so the div is on a separate line to the script?

Tom Fenech Over a year ago

Sure, just put a newline character in between: main.body = el.outerHTML+"\n"+main.body;

Collectives™ on Stack Overflow

Concatenate HTMLScriptElement

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related