I need to get my div between 2 divs inside my template. I can only edit it with external HTML, JS.
Template looks like this:
<main id="content-in">
<div id="homepage-banner"> XXX </div>
<div id="carousel-banner"> XXX </div>
And I need to get my img and a href <div id="moveOut"> XXX </div> between these 2.
I have it like this now which works ok:
<script>
function addCode() {
var d1 = document.getElementById('content-in');
d1.insertAdjacentHTML('afterbegin', '<div id="moveOut"><img src="https://example.png" alt=""></div>');
}
</script>
but I need to move it.
Thank you for your help.
You need to insert after the homepage-banner DIV.
var d1 = document.getElementById("homepage-banner");
d1.insertAdjacentHTML('afterend', '<div id="moveOut"><img src="https://example.png" alt=""></div>');
Related
I have this code that is generated by php:
<div class="fusion-post-content post-content">
<h2 class="blog-shortcode-post-title"></h2>
<p class="fusion-single-line-meta"></p>
<div class="fusion-post-content-container"></div>
</div>
I need to wrap two elements by using javascript so the code would look like this:
<div class="fusion-post-content post-content">
<div class="class">
<h2 class="blog-shortcode-post-title"></h2>
<p class="fusion-single-line-meta"></p>
</div>
<div class="fusion-post-content-container"></div>
</div>
This will do what you want. Isn't it better to change the code on server-side??
// Select the first element found
var parent = document.querySelector('.fusion-post-content');
console.log('Old child-length', parent.children.length);
console.log('Old:', parent.innerHTML);
// *You don't need the timeout
setTimeout(function () {
var h2 = parent.firstElementChild;
var p = parent.firstElementChild.nextElementSibling;
// Remove cildren
parent.removeChild(h2);
parent.removeChild(p);
// Insert the new child
parent.insertAdjacentHTML('afterbegin', '<div class="class"></div>');
// Insert the other children (old) in the new child
parent.firstElementChild.insertAdjacentElement('beforeend', h2);
parent.firstElementChild.insertAdjacentElement('beforeend', p);
// Gets one less, since we put to children in one (3 - 1 = 2)
console.log('New child-length', parent.children.length);
console.log('New:', parent.innerHTML);
}, 500);
<div class="fusion-post-content post-content">
<h2 class="blog-shortcode-post-title"></h2>
<p class="fusion-single-line-meta"></p>
<div class="fusion-post-content-container"></div>
</div>
I'am building a Chrome extension that parses the entire DOM/HTML and replace any found email(multiple emails) with the following div:
<div class="email_tmp"> found_email <span>SAVE EMAIL</span></div>
EXAMPLE:
<body>
<div>Some Text...</div>
<div>text a#a.com text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text b#b.com text</span></div></div>
<span>Last text</span>
</body>
replaced to:
<body>
<div>Some Text...</div>
<div>text <div class="email_tmp"> a#a.com <span>SAVE EMAIL</span></div> text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text <div class="email_tmp"> b#b.com <span>SAVE EMAIL</span></div> text</span></div></div>
<span>Last text</span>
</body>
How can I search and replace the found email by the entire div and the string found_email by the email too?
I want to replace only the found email(s) string, nothing more...
I really appreciate any help.
Here is the total solution for what your looking for
HTML
<div id="main">
sdfsdsdfsdfsdf a#a.com sdfsdfsdfsdfsdfsdf
</div>
JavaScript
var page_content = document.getElementById('main').innerHTML;
var found_email = "<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>";
//gives an array of the emails
var email = page_content.match(/([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
//replaces the emails to your desired content
var result = page_content.replace(email, found_email);
//replaces the changed HTML back to the 'main' div
document.getElementById('main').innerHTML = result;
Here is the Fiddle
Update:
If you want to replace only the text without adding any class or tags to the content of the HTML, then it gets real complicated to write a vanilla script for the same. In that case I would highly suggest you to use this library which I found to be the perfect solution for your problem.
Its a library called findAndReplaceDOMText which uses inbuilt methods to solve the purpose. You just need to give the find(what to find) and replace(replacing HTML) like so,
findAndReplaceDOMText(document.getElementById('t'), {
find: /([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,
replace: '<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>'
});
You can obviously revert if you face any problems in implementing this library.
Also this a must read article for you - replacing-text-in-the-dom-solved
Slight update on #NikhilNanjappa 's original answer: my version is less efficient, but it will keep the actual email address and prepend the div and append the span and closing tags, based on the original answer.
var save_email_beg = "<div class='email_tmp'> ";
var save_email_end = " <span>SAVE EMAIL</span></div>";
var i = 0;
for (; i < email.length; i++) {
var new_string = save_email_beg + email[i] + save_email_end;
page_content = page_content.replace(email[i], new_string);
}
document.getElementById('main').innerHTML = page_content;
I have a div element
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>
After magic jQuery script I want that it will be like that
<div class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>
So I tried to manipulate with this
<script>
$( document ).ready(function() {
$("[title*='space']").each(function() {
var title = $(this).attr('title');
var titleArray = title.split(" ");
$(this).attr("data-enter", titleArray[1]);
$(this).attr("data-exit", titleArray[2]);
$(this).attr("data-duration", titleArray[3]);
$(this).removeAttr('title');
});
});
</script>
But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that
<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>
But I don't want it.
Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this.
Thanks. I hope you understood my question.
I think this is job for regular expressions. Something like this:
$("[title*='space']").each(function() {
var title = this.title,
enter = this.title.match(/enter=(.*?)(\s|$)/),
exit = this.title.match(/exit=(.*?)(\s|$)/),
duration = this.title.match(/dur=(.*?)(\s|$)/)
$(this).attr("data-enter", enter[1]);
$(this).attr("data-exit", exit[1].replace(/,/, ' '));
$(this).attr("data-duration", duration[1]);
$(this).removeAttr('title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>
http://jsfiddle.net/AHd34/2/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append(jA);
});
<body>
<div id="content">
<div id="newLists" style="border:none;">
<!-- I'm going to need to reorganize this css so the above line does not need to happen -->
<p id="newListTitle"><span id="newListSpan">Here is a list </span></p>
<div id="listContainer">
</div>
</div>
</div>
I've never used jsfiddle before and it seems to just not be working at all. Probably something very simple and silly.
2 things:
first: in the console you can see that createTextElement doesn't exist
second: you declare a variable $jA and then append a variable jA (without the $).
Here's the working code:
http://jsfiddle.net/AHd34/3/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append($jA);
});
Try this
$(document).ready(function(){
var a =document.createElement("a");
a.innerHTML="AAA";
$('#listContainer').append(a);
});
http://jsfiddle.net/AHd34/7/
In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>