Insert text after an <img> tag - javascript

I try to insert text after an <img> tag using javascript.
<div id="candy"><img src="candy.png" /> Insert text here!</div>
If I use document.getElementById('candy').innerHTML = "test"; the image disappears.
Can you help me?

That's because you're replacing the innerHTML with the text test. You're not appending the text.
Try:
var div = document.getElementById('candy');
div.innerHTML = div.innerHTML + 'test';
Taken from here.

Well, the img tag is part of the HTML inside the div, and if you replace the div's HTML you rewrite the img tag as well.
Perhaps you wanted something like this instead:
<div><img src="candy.png" /> <span id="candy">Insert text here!</span></div>

Use
var div = document.getElementById('candy');
div.insertAdjacentHTML('beforeend', 'test');
Reference: https://developer.mozilla.org/en/docs/DOM/element.insertAdjacentHTML

That is because you javascript changes the html inside the <img> tag to test. This doesn't work as <img /> is a self-closing tag.
I believe you could you jQuery to do what you are trying to however.

Related

Using js or jquery to replace w3-include-html attr

The w3 schools offers a js script to load html content inside a div using an attribute called w3-load-html.
I'm trying to replace the content of this attribute, but it seems JS doesn't recognize it.
<div id="div" w3-load-html="somecontent.html">
</div>
$("#div").attr("w3-load-html","someothercontent.html");
Have anyone tried this before? Or has an idea on how to achieve it.
In vanilla JS, setAttribute() can help you out:
var div = document.getElementById('div');
console.log(div);
// Modify the attribute
div.setAttribute('w3-load-html', 'someother.html');
console.log(div);
<div id="div" w3-load-html="somecontent.html"></div>

Add Div Text code inline to onclick event

I have a div where I would like to get the value and use it inside an onclick event.
Here's the div.
<div id="cars">100</div>
Then I need to enter the id cars text or html into the message below.
So I need to insert the 100 where is said INSERT HERE in the code below.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" />
How can I do this?
In plain javascript:
document.getElementById('cars').innerHTML
or with jQuery:
$('#cars').text()
This will be very simple using jquery
$("#cars").text();
Will give you the text
If you want the jQuery solution use .html() to get the text between the start/close div tags.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello' + $('#cars').html())" src="images/share_text.png" style="height:2em" />
Its not suggested to include jquery/ javascript code in html code. I suggest you can do this on document.ready event as below, you need to give an "id" to your image tag also.
HTML code (add id to image tag)
<div id="cars">100</div>
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" id="image_id" />
Jquery Code:
$( document ).ready(function() {
var car_val = $("#cars").html();
var onclick_Val = $("#image_id").attr("onclick");
var onclick_new_val = onclick_Val.replace('INSERT HERE', car_val);
$("#image_id").attr( 'onclick', onclick_new_val );
});

how to find first level of child tag in jquery

I have XML like below
<parent id="parent">
<body>
body text<body>hello</body>
</body>
</parent>
as shown in above code it have parent tag where there is only body tag should available, but there is some text in body tag with tag again.
so if i use
$('#parent').find('body').text();
it show output as
body text hello
but i want the output exactly like
body text<body>hello</body>
how should i do? If again there are more than one body tag are written in first body tag it should be treated as only text. not as tag.
Use html instead:
$('#parent').find('> body').html();
$('#parent').find('body:first').html();
HTML
<body>and another text followed by <div class="someText"></div>Some text followed by</body>
JQuery
var texts = $('.someText, body').map(function(){
return this.previousSibling.nodeValue
});
alert(texts[0]); // "Some text followed by "
alert(texts[1]); // " and another text followed by "
DEMO
You can use some DOM Traversing:
$('#parent').find('body').first().html();

Get html content of a selector ( .html() ) with jQuery from a JavaScript variable that contains HTML

I have a javascript variable that contains a part of html code.
I need to get in this part of html code a div html content.
How can i do it ?
This is an example:
var code = '<style type="text/css">
#example{
border:1px;
font-size:20px;
}
</style>
<div id="ex"> Some Content </div>
<div id="ex2"> Some Content <span> Another Content</span></div>
<div id="my_code">This Is My Code.</div><div id="ex3> Etc Etc </div>';
I'd like get content of div "my_code" with Jquery .html();
How can i do it ?
Thanks
code variable it's just a string for your document. If you have parsed this HTML code inside the body then you can use $('#my_code'), otherwise it's still just a string so.. that's another story.
Check the other story here: http://jsfiddle.net/NSCQh/1/
I strongly suggest you have a look at jQuery's selector overview. They are the most important part of the jQuery magic, and without understanding them you'll get nowhere in the long run.
var html = $('#my_code').html()
or because that div containts text only
var txt = $('#my_code').text()
You've got a string, you need a DOM element. From that, you can get the jQuery object.
var el = document.createElement('div');
el.innerHTML = code;
console.log($(el));
pass the string to jquery and it works
var foo = '<div id="foo"> <span class="bar">fooBar</span> </div>';
var inside = $(foo).find('.bar').text();
alert(inside);
Create an ELEMENT, say p.
Use the following
$('<p>').append(code).find('div#my_code').html();
It create a p element, then append the content of variable code, then find div with id=my_code and select it's innerHTML.
Working model in the snippet.
var code = `<style type="text/css">
#example{
border:1px;
font-size:20px;
}
</style>
<div id="ex"> Some Content </div>
<div id="ex2"> Some Content <span> Another Content</span></div>
<div id="my_code">This Is My Code.</div><div id="ex3> Etc Etc </div>`;
var elm=$('<p>').append(code).find('div#my_code').html();
console.log(elm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to see the source code of a particular html tag by onClick() javascript without showing its css?

Hi everyone,
here am trying to display the source code of a particular div by onclick
javascript function. But the result am getting is , when i click on the div, am seeing the
whole source code though am trying to make only the particular source code of a div to get
displayed. anyone please highlight me what am doing wrong here..! and what to do to make
it work in the way its expected.
<html>
<head>
<title></title>
<script type="text/javascript">
function viewsource(){
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('para').innerHTML = newHTML;
}
</script>
</head>
<body>
<p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
Additional notes:
In the above code, when the button is clicked, the paragraph tag with the id of para will display...but it shows its css too. I want to display only the html tag without the css style attribute.
I don't want the content using innerHTML but i want the whole div including with the div id.(eg.)<div id='softros'><img src='/images/bgrade.jpg' /></div>
have you considered to just use inside your java script handler :
document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML
You can get the HTML of the div using .innerHTML or .outerHTML but you need the encode it before you can display it. Otherwise the html gets renderd by the browser. In PHP you could use htmlencode javascript has no function for this but you could use this htmlencode.

Categories