i want to insert html codes using chrome extension.
Adding complex HTML using a Chrome content script
this link works but i need to insert more specific area. For example this links add html codes to top of codes but i need to insert in specific codes like
<html>
<body>
...
...
<div>
//codes
</div>
// i want my code goes here
// <div>
// </div>
...
...
</body>
</html>
if im still can't explain myself, there is a chrome extension which name is "looper for youtube" this extension is doing what i need. Thanks for any helps, and sorry for my bad english
You have to write code in the content_script to specify where your HTML will be injected. For example, you could use the insertBefore function to insert HTML code before an existing element.
There are many functions surrounding the DOM tree which can help you specify the exact point in the document to insert new objects. Do not think about the HTML as a text file, think about it as a document tree (with parent nodes, child nodes, and ids). Here is a list of functions to get you started:
http://www.w3schools.com/jsref/dom_obj_all.asp
For example, something like:
document.getElementById('test').innerHTML = "HI!";
Will insert "HI!" inside the div tags in the following HTML:
<html>
<body>
<div id='test'>
</div>
</body>
</html>
If you require further assistance, please be more specific with your request. Where (exactly) do you need the HTML to be injected?
Related
If I have the HTML
<html>
<body>
<div>"Foo" "Bar"</div>
</body>
</html>
is there any way to hav the browser emit "Foo" and "Bar" as two text nodes so it rendered the same as <div>FooBar</div>? I know that, with JavaScript, you can add two text nodes as children of a div to achieve this result, but I'm wondering if it's possible in vanilla HTML. The reason I ask is because I'm workin on an SSR engine that does partial hydration, and the JS engine is looking for several text nodes in an HTML element but I can only manage to create one. Thanks in advance for any tips!
I´m using this W3 script:
<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>
It works perfectly, but my issue would be that I only need one particular portion of the "content.html", and not all of it. So my question is: How do I use w3-include-html for PARTIALLY html include?
Thanks!!
You can't include part of a partial; the whole point of a 'partial' is that it in itself represents part of the code, not code that you should extract a part from.
You can include more than one partial on a page, but the partials themselves must be exactly what you're trying to include at that point; you can't 'extract' content from a partial.
Simply shrink your content.html so that it only contains the output that you would like to include on your main page.
Having said that, considering W3.js can only import HTML, there's literally no reason to store the partial HTML in an external file. Not only does this create a second, unecessary file, but it also adds a reliance on JavaScript. If your visitor opts to disable their JavaScript, your partial won't work. Thus, I strongly recommend simply writing the content of content.html in the main page itself.
Hope this helps!
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags
I am building a platform where people can send emails - to display a preview of the emails, I use a div below the form where they can type the message.
So the general structure looks like this:
<html>
<body>
<form>
<!-- Form to enter email here -->
</form>
<div>
<!-- Email preview here -->
<html>
<!-- Email content, updated everytime user types something --->
</html>
</div>
</bod>
</html>
However, simply using the html tags inside the html document itself seems to confuse every browser - also, it doesn't seem very clean.
Since the email that is sent will be a whole html document of its own, it would be the easiest to just put all that inside the div.
How can I do that in a valid, clean way?
Use an iframe. You can write dynamic content to them - you don't always have to load physical pages into them with an src attribute.
HTML:
<iframe name='preview'></iframe>
JS (inside DOM-ready callback)
var doc = document.preview.open("text/html","replace");
doc.write('<html><body><p>this is some content</p></body></html>');
doc.close();
You can't get this around using the approach you have used. Getting emails rendered in mail clients is a chalenge, You may want to use an iframe instead. However you have to make sure that the contents of an email copy have to be fully in a table layout format.