I have an HTML5 page structure like this:
<article id="article_id">
<div></div>
<div> </div>
<div> </div>
<form id="form_id">
<input id="" onsubmit="submit()"/>
</form>
</article>
Now I want to add a new div after div and before form. How should I do it?
I have tried:
$("#form_id").befor('<div id="div_id" class="block">');
$("#form_id").parent().befor();
$("#form_id").after('<div id="div_id" class="block">');
The HTML code works fine.
First of all, it's before. Secondly, you must pass an argument to it. The html that you will put before the form.
$("#form_id").before('<div class="block"></div>');
demo http://jsfiddle.net/uHrKG/1/
Related
I have this code below, it also has image URL and many more which I didn't post buti want to get the whole exact div tag exactly it is trimming all the other div tags. like i want "col-sm-8" div tag exact it is from the whole function
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
<div class='col'>
<div class='MainMessageFormat'>
<pre><p>test message</p></pre>
</div></div>
<div class='row'>
<div class='MainMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
You can use innerText property of javascript like below:
console.log(document.querySelector('.MainMessageFormat.FixedMarginForMessage').innerText);
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
I am working on an application that has a form on one of its pages. The form is enclosed in a bunch of nested div tags. It looks something like this:
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer>
<div data-reactid=".0">
<div data-reactid=".0">
<div data-reactid=".0.0.1.$form">
<form id="myForm" data-reactid=".0.0.1.$form.1">
...
</form>
</div>
</div>
</div>
</div>
</div>
</main>
The trouble is that I can see the form on my webpage, and also through the 'View Source' function in my browser, but when I do an 'Inspect Element' to see the actual HTML being generated, I just see
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer">
</div>
</div>
</main>
I can't see any of the HTML elements inside the div 'formContainer' when I do an 'Inspect Element', even though they are right there on the page. Any ideas as to why might this be? I need to get the form Id in Neoload, but Neoload just won't read it, since it's absent from the page's source.
Edit: Several of the div tags are using data-reactid=".0.0". The form element itself has data-reactid=".0.0.1.$form.1". Basically anything with react disappears. I know nothing of React. Could this be causing this issue? I have updated my code to match the original code more closely.
You are not closing the id="form-container"! A " is missing
I am creating a vue web app, I have a simple file input, but there is some logic, due to which someone can hide or show the file input. Problem is once you hide the file input, and show again, it removes the file name. File name does not show while variable still holds the file.
Here is some relevant code and fiddle demonstrating it.
<div id="app">
<button #click="switch1=!switch1">switch1</button>
<div v-if="switch1">
<h4>Select an image</h4>
<input type="file" #change="onFileChange">
</div>
</div>
When you use v-if, the input is not hidden, it's removed from DOM.
To hide an element, use v-show instead:
<div id="app">
<button #click="switch1=!switch1">switch1</button>
<div v-show="switch1">
<h4>Select an image</h4>
<input type="file" #change="onFileChange">
</div>
</div>
How to get ID of extreme parent div?
<div class="panel" id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</div>
Take two use cases:
if panel classname is there in extreme div, then how to get ID of div?
if panel classname is not there, then how to get ID of parent div?
I tried:
$("#yo").click(function(){
alert($(this).closest('div').attr('id'));
});
Please do not use parent().parent().parent(), as extreme div location could be different at multiple places
Try using the class selector:
$("#yo").click(function(){
alert($(this).closest('div.panel').attr('id'));
});
If you do not have the class we need to see the parent html where this will be located in order to give you a solution.
UPDATE
A solution if the class is not defined is to use another tag, instead of div use section for the upper parent tag.
<section id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</section>
$("#yo").click(function(){
alert($(this).closest('section').attr('id'));
});
If you can count on the level of nesting, then you can just go up the parent chain until you get to it
$('#yo').on('click', function(){
alert($(this).parents().eq(2).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id="Kudapanel"> //Extreme Div
<div class="Kudapanel1" id="Kudapanel1">
</div>
<div>
<div>
<input type="button" id="yo"> //In much nestings
</div>
</div>
</div>
Otherwise you should go with #Mivaweb's answer
I want to copy all the child elements of parent div into the text box using jquery.
I tried to find the solution over stackoverflow and google, but did not find any solution. Please help, i will be very greatful. Thanks in advance
<div id="hello">
<div class="sub1">Hello how are you</div>
<div class="sub2">Hello how are you</div>
<div class="sub3">Hello how are you</div>
</div>
</div>
I want to copy all the children elements in the text
The output should come like this:
<input type="hidden" value="<div class="sub1">Hello how are you</div><div class="sub2">Hello how are you</div><div class="sub3">Hello how are you</div></div>" id="textbox">
use html() to get the all the dom and text value
$("#textbox").val($("#hello").html());
Try this
alert($("#hello").html())
$('input:hidden').val($("#hello").html())
to achieve this you can do as below:
var values=$('#hello').html();
$('#textbox').val(values); // textbox is the id of hidden field you specified