How to add script element and ins programmatically inside div?

Question

QUESTION:

I would like to do something similar to this:

var code = (<ins>...</ins><script>...</script>)

document.getElementById("rightScroll").append(code);

What is the correct syntax ?

EDIT: Of course this syntax is incorrect, that's why I am asking for a solution here.

SITUATION:

The element will be added to rightScroll every time the user scrolls 100vh

I'm not clear on exactly what it is that you want to do, but from what you've described this feels like the wrong way to do it. — j08691, Apr 24 '17 at 19:34
@gyre Lol, that's literally the last question I checked before I asked my question. That method does not work in my case. — Coder1000, Apr 24 '17 at 19:50
@Coder1000 Post what you tried. We can't tell what you're doing wrong otherwise. — Barmar, Apr 24 '17 at 20:08
It would be better if the script just defined a function. You would load it once, and call the function every time the user scrolls 100vh. — Barmar, Apr 24 '17 at 20:10
@Barmar I already have said function. I just need a way to append an adsense ad every time the user scrolls (question edited) — Coder1000, Apr 24 '17 at 20:25
You said you tried the method in the question that @gyre linked to. Show your code that uses that method. — Barmar, Apr 24 '17 at 20:29
@Barmar That's why I had the jquery tag in there, I had forgotten. — Coder1000, Apr 24 '17 at 20:30
@Barmar I did not try the method per se, since I wouldn't know how to include both the — Coder1000, Apr 24 '17 at 20:31
You don't have to do anything special for ``, do that normally. Use the method in the other question to add the script. — Barmar, Apr 24 '17 at 20:32

scunliffe · Answer 1 · 2017-04-24T20:39:16.583

There's a typo on the getElementById method, and the string you are building is not in quotes. I've roughly quoted the string you've provided, but it will likely need extra attention where your ... code is.

var code = "<ins class=\"adsbygoogle\"" +
         "style=\"display:block;width:300px;height:600px;margin-bottom: 20px;\"" +
         "data-ad-client=\"...\"" +
         "data-ad-slot=\"...\"></ins>" +
         "<script>" +
         "(adsbygoogle = window.adsbygoogle || []).push({});" +
         "</script>";

document.getElementById("rightAdScroll").append(code);
//                   ^^ was missing "Id"

This will only work though if you have an append method on your DOM element. append is a jQuery method but it doesn't appear that you are using it directly in this case.

I'd recommend either making 2 calls to:

var myElem = document.getElementById("rightAdScroll");
myElem.appendChild(insTag);
myElem.appendChild(scriptTag);

or use jQuery (if you have it loaded already):

$('#rightAdScroll').append(code)
document.getElementById("rightAdScroll").append(code);

As @Barmar pointed out in the comments, `append` is not a valid DOM method. — Heretic Monkey, Apr 24 '17 at 20:37

score 1 · Accepted Answer · answered Apr 24 '17 at 20:42

You need to create the elements as dom elements:

var ins = document.createElement("ins");
ins.className = 'adsbygoogle';
ins.style = 'display:block;width:300px;height:600px;margin-bottom: 20px;';
var attClient = document.createAttribute('data-ad-client');
attClient.value = '...';
ins.setAttributeNode(attClient);
var attSlot = document.createAttribute('data-ad-slot');
attSlot.value = '...';
ins.setAttributeNode(attSlot);

var myScript = document.createElement("script");
myScript.setAttribute('type', 'text/javascript');
myScript.innerHTML = '(adsbygoogle = window.adsbygoogle || []).push({});';

var rightScroll = document.getElementById("rightAdScroll");
rightScroll.appendChild(ins);
rightScroll.appendChild(myScript);

Fiddle: https://jsfiddle.net/9tdn2qcd/1/

Thank you :D I was surprised it took so long for someone to answer correctly :) — Coder1000, Apr 24 '17 at 20:51

How to add script element and ins programmatically inside div?

2 Answers2