In html how to pass div class content (text) to another class or id?
Question
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name ( <div class="name">Content-text</div> ) to another my id <div id="titlebar"></div> through css or js . i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
6 answers
solution1
2 ACCPTED 2019-09-01 04:34:03
Working Sample, jsFiddle Please find it here .
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
solution2
1 2019-09-01 04:31:46
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
solution3
1 2019-09-01 04:34:08
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var Content_text = $(".name").text(); $("#titlebar").text(Content_text); }); }); </script> </head> <body> <button>Copy</button> <div class="name">Content-text</div> <div id="titlebar">copy here</div> </body> </html>
solution4
0 2019-09-01 04:06:58
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
solution5
0 2019-09-01 04:42:35
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from theHTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() { var div1Data= document.getElementById('div1'); var div2Data= document.getElementById('div2'); div2Data.innerHTML = div1Data.innerHTML; }
<div id="div1"> Content in div 1 </div> <div id="div2"> </div> <button onClick="copyContent()">Click to copy</button>
solution6
0 2019-09-01 06:03:05
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <script> $(document).ready(function(){ var Content_text = $(".name").text(); //alert(Content_text); $(function() { $(window).mousewheel(function(turn, scroll) { if (scroll > 0) $('#titlebar').text('Content_text'); else $('#titlebar').text('Copy here'); return false; }); }); //$("#titlebar").text(Content_text); }); </script> </head> <body> <div class="name" style="margin-top:50px;">Content-text</div> <div id="titlebar" style="margin-top:50px;">Copy here</div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.