We Keep Coding

How to add new image element to html href link with javascript?

I have a problem creating a new image element to this code here:
Sound Packs
Unfortunately, I do not have access to the HTML code because it belongs to a locked template of "jimdo". I can only insert CSS codes and javascript in the "head area". Is there a way to add an image element to this HTML code with javascript?

Yes, there is a way to do this using just javascript. Firstly you need to set the window.onload callback to a function. Within this function, you can then get the element you want to add the image to. Here I added the image to the element with the attribute data-link-title which is equal to "Sound Packs".
Lastly, you can use .innerHTML on this element to add the HTML you want to add within this element. Here I added a <br /> followed by an <img> tag:
document.body.onload = function() {
let soundPacks = document.querySelector('[data-link-title="Sound Packs"]');
soundPacks.innerHTML += "<br /><img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' alt='StackOverflow Logo'/>";
}
Sound Packs

JQuery $(this).find("#id").text("text") not changing text

I'm looping through all elements of a certain class on a page and editing the text of an tag in that class with a certain id. I'm referencing the element with $(this).find('#time') and trying to change the text of that object using $(this).find('#time').text("test"), but the the text of the element isn't changing and I can't figure out why.
EDIT:
$('.box').each(function(i, obj){} This is what the loop is, the odd thing is that when i simply reference the text with $(this).find('#time').text() i receive the correct output. But the text won't change when using .text().
Here is the code im using to change the object text:
var time = response.substring(7, 15);
var user = response.substring(16, response.length);
$(this).find('#time').text(time);
$(this).find('#name').text(response.substring(user));
Game Page
<div class="box">
<h1>${{ game_object.amount }}</h1>
<h2 id="time">{{ game_object.start_time}}</h2>
<p id="name">{{ game_object.current_top_user }}</p>
CLICK NOW
</div>

Try to use .html
$(this).find('#time').html("test")
or maybe this can help you:
$('body').find('#time').text('test');
Because the ID of an element must to be unique

Want to fetch value of a tag using javascript

I have an html on a page like this:
<div id="headline" class="editable-item"><p class="title" dir="ltr">InfosysSolutions Pvt. Ltd.</p></div>
The value in paragraph tag changes every time. I want too fetch value inside this tag ie: in this case it is "InfosysSolutions Pvt. Ltd." using javascript.

I think you can get the contents of the p element with class title inside the #headline element
var title = document.querySelector('#headline .title').innerHTML
Demo: Fiddle

Trying to insert a new html with input button

My goal is to create a button that when pushed will execute javascript to insert html that creates a new div with content inside of it. I have been able to get the button to click and
preform a .toggleclass and I have tried to use .html , .insertAfter(input.html()); but I have not had any luck.
My HTML for button
<input id="slideshow" name="viewing" value="View Slideshow" type="button"
onClick="newOverlay();">
current javascript
function newOverlay(){
var newItem = $("<p>Add this text instead</p>");
$("input").insertAfter(this.html("<p> Is this going to work</p>"));
}
I know this is adding a < p > and not a div but I tried to make it similiar thinking if I could get it to insert this paragraph then I could work on inserting the div.
Thanks for looking at this.

If you want to insert a p tag after every input, then you should do
$("input").after("<p> Is this going to work</p>");
If you want to inser the p tag after the input that was clicked then you would do
$(this).after("<p> Is this going to work</p>");

Where do you want to append your new item?
You should do something like this I guess.
function newOverlay(){
var newItem = $("<p>").text("Add this text instead");
$("YOUR_SELECTOR_HERE").append(newItem);
}
Give a sample with jsFiddle.

Setting a JS variable and using it in html tag

I have set a variable, and I need to pull in this variable into a html element, but I cant get it to print out the value, this is the code:
<script>
var randomnumber=Math.floor(Math.random()*11)
</script>
<div id="<script type="text/javascript">document.write(randomnumber)</script>"></div>
Thanks.
Edit: I just used a div as an example, but i need to add a random number to an img tag, as it is for a tracking tag, and needs a unique identifier. Is there a better way to go about this?

Use
<script>
document.write('<div id="'+randomnumber+'" ></div>');
</script>
You can't open a script tag inside an attribute

Or you can create it using JS:
var randomnumber=Math.floor(Math.random()*11);
a = document.createElement('div');
a.setAttribute('id',randomnumber);
document.body.appendChild(a);
// if you know the exact class or ID where it is to be appended you can use
document.getElementsByClassName("myclass")[0].insertBefore(a, document.getElementsByClassName("beforeClass").firstChild);
This will create a div, with the id as the randomnumber and append it to the body