I want to create some html via JS, therefore I need to write the html inside the JS file like:
function createHtmlSection() {
return "<li class=\"chapter up-wrapper-btn\">" +
"<div>" +
"<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" +
"<label contenteditable=\"true\">section 1</label>" +
"</div>" +
"</li>";
}
is there a tool or some shortcut to create this type of html string?
I mean, in this case I was needed to type all this html by hand. with + and needed to add " sign.
Something that can convert this:
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
to the first string that I was needed to type by hand
You can use a template literal (note the back-ticks). The literal supports multiline, and you won't need to escape the quotes (you'll need to escape back-ticks).
`<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
Example:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection();
<ul id="root"></ul>
You can also pass parameters to the function, and insert them to the string using expression interpolation:
function createHtmlSection(label) {
return `
<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">${label}</label>
</div>
</li>
`;
}
document.querySelector('#root')
.innerHTML = createHtmlSection('!!! section !!!');
<ul id="root"></ul>
update your JS file to:
function createHtmlSection() {
return `
<li class="chapter up-wrapper-btn">
<div>
<button>
<i class="fa fa-plus" onclick="addSection('up',this)"></i>
</button>
<label contenteditable="true">section 1</label>
</div>
</li>
`
}
Read this link for more information:
template literals
You can also use ' (one quote) so you dont have to put / front every "
Just use template literals (not a single quote "'" but the back-tick "`") like this:
// JavaScript
document.getElementById("a").innerHTML = `<li class="chapter up-wrapper-btn">
<div>
<button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button>
<label contenteditable="true">section 1</label>
</div>
</li>`
<!-- HTML -->
<div id="a"></div>
Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with
them. They were called "template strings" in prior editions of the
ES2015 specification.
Via - MDN Web Docs
An alternative method is to use single quotes and escape the newline character.
Something like this:
function createHtmlSection() {
return '<li class="chapter up-wrapper-btn">\
<div>\
<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>\
<label contenteditable="true">section 1</label>\
</div>\
</li>';
}
console.log(createHtmlSection());
Swapping to single quotes saves you from escaping the double quotes in the HTML, but you still need to quote the single quotes.
Another alternative is to use an array and .join('') it:
function createHtmlSection() {
return [
'<li class="chapter up-wrapper-btn">',
'<div>',
'<button><i class="fa fa-plus" onclick="addSection(\'up\',this)"></i></button>',
'<label contenteditable="true">section 1</label>',
'</div>',
'</li>'
].join('');
}
console.log(createHtmlSection());
This allows you to easily add/edit/delete parts of the code later on.
Both of these options are for ES5 or older.
For modern browser, please use the ES6 version provided by Ori Drori.
Related
<li class="list-item regOptions">
<a onclick="EditRegPost('5' , 'I'M NEW REGULATION')">
<span class="far fa-edit pr-1"></span>
<span>Edit this post</span>
<p class="text-muted">This will Update the content of this post</p>
</a>
</li>
this is how the syntax looks like on the browser
<li class="list-item regOptions">
<a onclick="EditRegPost(\'' . $row['id'] . '\' , \'' . $row['title'] . '\')">
<span class="far fa-edit pr-1"></span>
<span>Edit this post</span>
<p class="text-muted">This will Update the content of this post</p>
</a>
</li>
and this is the syntax on the editor
when I'm trying to invoke EditRegPost() function on click
it fails and display this message :
Uncaught SyntaxError: missing ) after argument list
I'm not really sure how , my syntax seems to be right . I would appreciate any help , thanks
Use \ in the String of the second param
onclick="EditRegPost('5' , 'I\'M NEW REGULATION')"
I changing HTML near the top of my website using JS and its not working I was having a similar problem earlier because the quotations were messing it up but i tried to fix it with that method but it still isn't working.
document.getElementById("accTabs").innerHTML = "<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>";
document.getElementById("accTabs").innerHTML = "<a onclick=\"document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Please try like this snippet.
Your error is raised because you used quote incorrectly.
document.getElementById("accTabs").innerHTML = "<a onclick="alert('ok')"></a>";
If you try like this code, then double quote inside double quote will cause the problem.
You need to change this like below to escape the problem
document.getElementById("accTbs").innerHTML = "<a onclick=\"alert('ok')\"></a>";
You could also use ES6 template literal. then you can use double quote and single quote inside string without any problem.
document.getElementById("accTabs").innerHTML = `<a onclick="alert('ok')"></a>`;
document.getElementById("accTabs").innerHTML = "<a onclick=\" document.getElementById('id01').style.display='block'\" class=\"w3-bar-item w3-button\" id=\"log\"><i class=\"fas fa-users\"></i> SIGN IN</a>";
<div id="accTabs"></div>
Just properly escape your " with \" and use ' to wrap the string, reducing escapes
document.getElementById("accTabs").innerHTML = '<a onclick="document.getElementById(\'id01\').style.display=\'block\'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>';
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
Moreover, you could also try ES6's backtick ` to even completely avoid escaping.
document.getElementById("accTabs").innerHTML = `<a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
<div id="accTabs"></div>
<div id="id01" style="display: inline">id01</span>
try using template strings as shown below
document.getElementById("accTabs").innerHTML = `<a
onclick="document.getElementById('id01').style.display='block'" class="w3-bar-
item w3-button" id="log"><i class="fas fa-users"></i> SIGN IN</a>`;
This would work.
Learn more about Templete strings Here
I'm trying to iterate through an array and clone and append an element to a div element for each item in the array.
Everything is working except when it's more than one element I get some unexpected results.
The array contains two element's and I've checked that the each loop only runs two times, but for some reason I get a third element in the result.
Am I using clone() and appendTo() correctly?
each loop:
let items = $(contentWrap).find(".lc-rating-modal-review-items-wrap");
$(items).empty();
$.each(data.items, function (index, review) {
let item = GenerateReviewItem(review);
$(item).appendTo(items);
});
GenerateReviewItem:
function GenerateReviewItem(review) {
let result = $(wrap).find(".lc-rating-review-item-template").clone();
$(result).find(".lc-rating-review-item-template-date").html(review.dateFormated);
$(result).find(".lc-rating-review-item-body-wrap").html(review.review);
$(result).find(".lc-rating-review-item-template-stars-rating-label").html("(" + review.rating + ")");
$(result).find(".lc-rating-review-item-template-star").each(function (index, star) {
if (review.rating >= (index + 1)) {
$(star).removeClass("fa-star-o").addClass("fa-star");
}
});
return result;
}
Html to clone:
<div style="display:none;">
<div class="lc-rating-review-item-template">
<div class="lc-rating-review-item-header-wrap">
<div class="lc-rating-review-item-template-stars-wrap">
<div>
<i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-star-o lc-rating-review-item-template-star" aria-hidden="true"></i>
</div>
<div>
<span class="lc-rating-review-item-template-stars-rating-label"></span>
</div>
</div>
<div style="text-align:right;">
<span class="lc-rating-review-item-template-date"></span>
</div>
</div>
<div class="lc-rating-review-item-body-wrap"></div>
</div>
</div>
I'd recommend storing the reference to your template node outside of your loop, and then doing the cloning inside of the loop.
Define this outside the loop:
let template = $(wrap).find(".lc-rating-review-item-template")
And then change this:
let result = $(wrap).find(".lc-rating-review-item-template").clone();
To this:
let result = template.clone();
As it is currently, when your loop executes a second time, $(wrap).find(".lc-rating-review-item-template") is likely finding two items instead of one.
It also appears that wrap, unless it is a global, is undefined within the context of the GenerateReviewItem(review) function.
<li data-id="528">
<a title="LOGIN" class="dropdown-toggle" href="#">
<i class="glyphicon glyphicon-user"></i>LOGIN</a>
<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>
I Have this html I want to change the content by data-id like given below
<li data-id="528">
<a title="LOGOUT" href="/logout">
<i class="glyphicon glyphicon-user"></i>LOGOUT</a>
<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>
</li>
Is this possible if, Please advice me
Thank you.
Yes it's possible.
Like this
var a=$('li[data-id="528"]').find('a');
a.attr('href','/logout');
a.contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('LOGIN','LOGOUT');
});
You can get the element by attribute selector, and use .html() to modify content:
$('[data-id="528"]').html('<a title="LOGOUT" href="/logout"><i class="glyphicon glyphicon-user"></i>LOGOUT</a><div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>')
Actually you can modify innerHtml of an jquery element by .html()
$(selector).html(whatEverYouWant);
Try it.
var htmlData = '<a title="LOGOUT" href="/logout">';
htmlData+= '<i class="glyphicon glyphicon-user"></i>LOGOUT</a>';
htmlData+='<div style="width: 350px;" data-width="350" data-class="menu-login-row">My other content</div>';
jQuery('li[data-id="528"]').html(htmlData);
You can write just one line code for this
$('li[data-id="528"]').find('a').attr("title","LOGOUT").attr("href","/logout").html('<i class="glyphicon glyphicon-user"></i>LOGOUT</a>');
I am trying to call ng-init function inside ng-repeat and it only works only on the first element:
<li ng-repeat="comment in ad.comments|limitTo:quantity | orderBy : sortComment : true">
<div id="starsDiv" ng-init="orderComment(comment.stars)"></div>
Comment: {{comment.text}}
<cite class="clearfix"> on {{comment.posted | date}}</cite>
</li>
The orderComment inside ng-repeat function needs to init the starDiv:
$scope.orderComment= function(numOfStars){
var html = '<i class="fa fa-star-o" style="color:gold;"></i>';
for(var i =0 ; i<numOfStars-1;i++)
{
html += '<i class="fa fa-star-o" style="color:gold;"></i>';
}
document.getElementById("starsDiv").innerHTML = html;
};
Injecting HTML to the starsDiv by the value of comment.stars.
For instance if comment equals 4 there will be 4 HTML elements of :
'<i class="fa fa-star-o" style="color:gold;"></i>'
inside it.
In general, Angular discourages making changes in the DOM on your own, and in this case it's not necessary.
A simple solution might be to put in the maximum amount of possible stars and using ng-show to show only the amount we need. Assuming there are 5 stars:
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 0"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 1"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 2"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 3"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 4"></i>
If you need a general solution, you can always use ng-repeat. You simply need a function that will take a number and return an array of that size. You can use the array like this.
<i class="fa fa-star-o" style="color:gold;" ng-repeat="x in array(comment.stars)"></i>
An even more general solution would be to create a custom directive that renders these stars. I recommend reading about custom directives: https://docs.angularjs.org/guide/directive