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>
Related
So my problem is that i need to edit this image source in selenium, but it doesn't have id or class.
<div id="mbr-content">
<div class="nope" some random stuff>
<script>
</script>
<div class="mbr-image-container">
<div class="mbr-image-wrapper">
<div class="mbr-image">
<img src="this source need to modify" alt="app_image">
</div>
</div>
</div>
#Html continues here
I just in some reason cant figure this one out.
I know that I need to use this command but not sure what shut I putt inside as script.
driver.execute_script("something here")
Using python-3.7
The javascript required to set the src attribute of your <img> element is:
document.querySelector(".mbr-image > img").src="whatver you want";
So, you can try below solution:
js = 'document.querySelector(".mbr-image > img").src="whatver you want";'
driver.execute_script(js)
As per the HTML you have shared to edit the src attribute of the desired element you can use the following solution:
element = driver.find_element_by_xpath("//div[#class='mbr-image-container']/div[#class='mbr-image-wrapper']/div[#class='mbr-image']/img[#alt='app_image']")
driver.execute_script("arguments[0].setAttribute('src','something here')", element)
I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
I have a javascript that I want my users to be able to put on their sites. In this javascript, I want to generate a simple button, that is located exactly where the javascript has been pasted into the site. How can I do this? It would be simple if I could give my <script> tag an id and then just getting the element with the specific ID and appending after it, but I can't.
For example if I have something like this:
<body>
<p>test para</p>
<p>test para</p><p>test para</p><p>test para</p>
<p>test para</p>
<div>test div</div>
<script src="embed.js" type="text/javascript"></script>
<div>last div</div>
</body>
I want my button to be placed right between test div and last div (before or after the script tag, it doesn't matter). Can I do this?
Could you just use after -
$("div:contains('test div')").after('<input type="button"/>');
This would obviously be better if you could give the 'div' an id or a class rather than finding it by the text it contains.
jQuery can find a script tag using -
$("script[src='embed.js']").after('<input type="button"/>')
Demo - http://jsfiddle.net/7GPx7/1
embedding JavaScript something you may want to consider is your visitors may not have jQuery enabled on their sites, so you could bloat the call by loading jQuery or construct your requirement in pure JavaScript.
The embed snippet for your visitors
<script id="eduard_luca" src="http://cdn.example.com/embed.js" type="text/javascript"></script>
embed.js
var element = document.createElement('a');
element.setAttribute('href','http://google.com');
element.innerHTML = 'Click Me';
document.getElementById("eduard_luca").appendChild(element);
I Hope this help you with your project.
i have a form in which I want to display a loader image only if the file upload field has any path in it, for that i thought of creating the image element in java script along with attributes: src, id and alt..
i am not aware of how to create elements using javascript. please help me.
This page has a good tutorial on dynamically creating DOM elements using javascript.
The standard way to do it is with the document.createElement function.
Small example which adds html code to a placeholder.
<script>
function example()
{
placeholder.innerHTML = "<img src='imagehere'/>";
}
</script>
<input type="button" value="Click" onclick="example();"/>
<div id="placeholder"/>
Using Jquery makes this nice and easy:
Javascript:
$('#MyElementID').html('<img alt="" src="Images/myimage.jpg" />');
HTML:
<div id="MyElementID"></div>
Renders as:
<div id="MyElementID"><img alt="" src="Images/myimage.jpg" /></div>