I want to replace the content in the current element with and html string taken out of an object.
It has to work dynamically regardless of what div, p...etc it is in.
<div id="content">
<h5><script>$(this).append(en.login_terms_and_conditions);</script></h5>
</div>
It's possible to do what you've shown, but it's probably not a good idea. You'd use $(document.body.lastElementChild):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// Presumably you have something defining that `en` variable and the object it refers to:
var en = {
login_terms_and_conditions: "terms and conditions here"
};
</script>
<p>one</p>
<p>two</p>
<p>three</p>
<div id="content">
<script>$(document.body.lastElementChild).html(en.login_terms_and_conditions);</script>
</div>
<p>four</p>
<p>five</p>
<p>six</p>...or of course, just $("#content") if that id is always on the element.
This works because the element is added to the DOM as of when your script runs (the details on that are complicated, but covered in the spec), even though the element's end tag has not yet been parsed.
I wouldn't do that, though, for a couple of reasons, not least that if you're doing this with jQuery, you have to load jQuery prior to that element, which holds up the rendering of your page. You could fix that by not using jQuery for this bit:
<script>
// Presumably you have something defining that `en` variable and the object it refers to:
var en = {
login_terms_and_conditions: "terms and conditions here"
};
</script>
<p>one</p>
<p>two</p>
<p>three</p>
<div id="content">
<script>document.body.lastElementChild.innerHTML = en.login_terms_and_conditions;</script>
</div>
<p>four</p>
<p>five</p>
<p>six</p>...but it still seems like there are simpler solutions, like just document.write-ing the content, or using server-side templating.
Your example is not quite how jQuery works. The location of the script is irrelevant to the scope of this when attempting to affect an element.
Instead you need to select the #content element directly, then call html() with the value of the login_terms_and_conditions property. Try this:
var en = {
login_terms_and_conditions: '<h2>fizz buzz</h2>'
}
$(function() {
$('#content').html(en.login_terms_and_conditions);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<h5>foo bar</h5>
</div>
First, this does not work as you want. You have to select an element first and then refer to it with this.
Second, even if you would want to add an object key directly into html, that's not possible. ( is possible in JSX but that's another thing :) ).
Third, to make it more dynamic (as I understood you want), you can add some specific data-attributes to your html elements. For example a data-obj='content' for the content and so on. Then, you can iterate your en object and add en[key] value to it's respective html element with the data-obj.
See below
const en = {
title: 'Title in english',
content: 'Some content in english here <br/>Some content in english here ',
link: 'Link text'
}
for (let key in en) {
if( en.hasOwnProperty(key) ) {
let element = $(`[data-obj='${key}']`)
element.html(en[key])
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<h5 data-obj="title"></h5>
<p data-obj="content"></p>
<a data-obj="link"></a>
</div>If you want to target by id, then you could try something like this:
$("#content").html(en.login_terms_and_conditions);
