This question already has answers here:
Creating multiline strings in JavaScript
(43 answers)
Closed 7 years ago.
I need to generate 185 lines of html on a web page when the user clicks on a button and I want to declare the html code as a multiple lines on a variable but I 've problems with the html code on a variable, I tried several ways researching on the web but I couldn't achieve it.
For example:
<script type="javascript">
//it doesn't work
var html = " <li> <!-- 185 lines of html --> </li>";
</script>
Using Heredoc (I thought heredoc notation doesn't work on Javascript -???-) notation seems that works but the javascript contained on the html shows an error.
I really appreciate any help.
You can do something like this:
document.getElementById('button').onclick = function(){
var eleContainer = document.getElementById('container'), //The parent of the of the elements
html = '', //Will be filled with html lines
repeats = 128; //You can change it as much as you want
for(var i=0; i<repeats; i++){
html += '<li></li>';
}
eleContainer.innerHTML = html;
}
Related
This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.
You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this
I want to modify the text in a html file using javascript in an android webview.
Essentially, I want to do what android Linkify does to text, but I don't want to do it with java code, because I feel like that might delay the webview rendering the html (if I parse the text before sending it to the webview).
So, for example a piece of html like this:
<html>
<body>
google.com <!--these two shouldn't be linked-->
akhilcherian#gmail.com <!--these two shouldn't be linked-->
<p>www.google.com</p> <!--this should be linked-->
<p>102-232-2312 2032-122-332 </p><!-- should be linked as numbers-->
</body>
</html>
Should become this:
<html>
<body>
google.com
akhilcherian#gmail.com
<p>www.google.com</p>
<p>102-232-2312 <a href="tel:2032-122-332>2032-122-332</a> </p>
</body>
</html>
I already have the regexes to convert numbers and email ids to links, and they're working well enough. What I want to ensure is that I don't link anything that's already within tags. I've removed anchor tags, so they're not an issue, but I also need to avoid linking things like this:
<div width="1000"> <!-- Don't want this '1000' to be linked (but I do want other 4 digit numbers to be)-->
So for example if my regex for links is:
var replacePattern1 = /((https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim
How do I make sure that it's not within < and >? (Answers using javascript would be appreciated, but if you feel like this is a stupid way of doing it, please let me know about alternatives).
If you're answering with javascript, this question can essentially be shortened to:
How do I write a regex in javascript to search for patterns which are not surrounded by '<' '>' tags
So if you use JS than mean is client side, your DOM page have free access of all objects of your page coef events.
May be in this step you dont need to use a regex just using DOM.
jquery lib can easy update DOM object.
in your step you want only tag.
So i suggest :
//using jquery
$("p").each(function(){
console.log($(this))
});
//js
var paras = document.getElementsByTagName("p");
for(p in paras){
console.log(paras[p])
}
As i tell you the deal is manipulate the DOM so example with you step dunno if exactly what you try to get :
var paras = document.getElementsByTagName("p");
var hrefs = [];
//what you want to replace in the loop of p
var json_urls = {"links":["http://", "tel:"]};
for(p in paras){
//copy of text content of your p
var text_cp = paras[p].textContent;
//delete the p[i] content
paras[p].textContent = "";
//create element dom a
hrefs[p] = document.createElement("a");
//i add attribute id with some affectation unique
hrefs[p].id = "_" + p;
//add attribute href to a with some affectation replace + content
hrefs[p].href = json_urls.links[p] + text_cp;
hrefs[p].textContent = text_cp;
paras[p].appendChild(hrefs[p]);
}
This question already has answers here:
Trim string in JavaScript
(20 answers)
Closed 9 years ago.
In my website, I have title that is kind of like this:
<title>Current Title → Sub Title → My Site</title>
I want to display the Sub Title part of the title in some of my html elements... so I wrote this JavaScript code to print the title, but only the text in between the 1st and 2nd →
"<script>document.write(document.title.split("\u2192")[1]);</script>"
But that code outputs " Sub Title " with a space in front and behind it. Do you know how I can somehow delete the 2 spaces using javascript (without changing the title) to output something like this: "Sub Title"?
Thanks!
Try using JQuery trim over the one you have used already
http://api.jquery.com/jQuery.trim/
like this:
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write($.trim(titlePart));
</script>
or if you want to stick to javascript, try using this...
<script type="text/javascript">
var titlePart = document.title.split("\u2192")[1];
document.write(titlePart.replace(/^\s+|\s+$/g, ''));
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
javascript - document.write error?
I want to write html into javascript.
I am sure this question, has been asked ofter, I know its simple but I can't figure it out.
I tried this:
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
But it removes all the other html.
I know this is noob question, I pretty unexperienced at javascript...
document.body.innerHTML += '<h1>This is a heading</h1>';
document.body.innerHTML += '<p>This is a paragraph</p>';
Lets say i have a div on my page and i want to add content to it:
<div id="myDiv"><div>
I can use javascript to do so:
<script>
var div = document.getElementById("myDiv");
var myHtmlString = "<h1>This is a heading</h1>";
myHtmlString += "<p>This is a paragraph</p>"
div.innerHTML = myHtmlString;
</script>
This question already has answers here:
jQuery appended table adds closing tag at the end of the text automatically. Why?
(4 answers)
Closed 8 years ago.
I am adding a table to a page in javascript using.
$("#tablediv").append("<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>");
The problem is that what it is run </tbody> and </table> is getting added at the end.
How can I stop this from happening?
Thanks.
Are you trying to add new elements to the table after you create it?
ID your table and then append to that.
$("#tablediv")
.append("<table id='mytable' border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr></table>");
$("#mytable")
.append("<tr><td>Bla</td><td>Foo</td><td>Bar</td></tr>");
Call the second jQuery function each time you want to add a new row to your table.
I'm under the impression you want this so you can loop through outputting your results?
var table = "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>";
// loop through your data here
table += "</tbody></table>";
document.getElementById("tablediv").innerHTML += table;
create var, append your stuff to it and then when you're ready call .append(html)
var html = "";
html += "<table border = '1'><tbody><tr><td width='100px'><b>Result</b></td><td width='100px'><b>Binding</b></td><td width='744px'><b>Value</b></td></tr>"
$("#tablediv").append(html);
You can't. You are operating on a DOM, not a stream of HTML.
jQuery allows you to use HTML syntax to describe a DOM fragment to be created (which you can then insert or otherwise manipulate), but that is just for convenience. If the HTML isn't a valid fragment, it will be error corrected.
If you want to deal in pieces of HTML, you have to do so as strings, not jQuery objects