Skip to main content

Get previous sibling HTML element using Javascript code

By

 Sometimes we requires in get previous sibling element in the HTML code and perform some operations in it like inserting any other element or get the innerHTML of previous element.

We can do this using 'previousElementSibling' property of JavaScript. Here is the sample HTML and JavaScript code for the same.


Get Previous Sibling HTML element :

<html>

  <body>

    <div id="firstDiv">      

    </div>

    <div id="SecondDiv">      

    </div>    

    <script>            

      //this line will return the first div

      let firstDivEle = document.getElementById("SecondDiv").previousElementSibling;      			    

    </script>

  </body>

  </html>
Here is the example to insert any element in the preivous sibling HTML element - 
<html>
  <body>
    <div id="firstDiv">
      
    </div>
    <div id="SecondDiv">
      
    </div>
    
    <script>            
      //this code will get the first div and insert button in it 
      let firstDivEle = document.getElementById("SecondDiv").previousElementSibling; 
      let btnToAdd = document.createElement('BUTTON');                                        
	  btnToAdd.appendChild(document.createTextNode("Button")); 
      
      firstDivEle.insertBefore(btnToAdd, firstDivEle.firstChild);      
    </script>
  </body>
  </html>
Labels:

Comments

Post a Comment

Popular posts from this blog

Show Image on canvas HTML5

By
Here is the sample code to select image from system and display it on html5 canvas and javascript: <input type= "file" id= "selectedImage" /> <canvas id= "myCanvas" width= "500" height= "500" > </canvas> Javascript code: $( "#selectedImage" ).change( function (e) { var URL = window .URL; var url = URL.createObjectURL(e.target.files[ 0 ]); img.src = url; img.onload = function () { var canvas = document .getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); var imgSize = calculateAspectRatioFit(img.width, img.height, canvas.clientWidth, canvas.clientHeight); ctx.clearRect( 0 , 0 , canvas.width, canvas.height); ctx.drawImage(img, 0 , 0 , imgSize.width, imgSize.height); } }); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math .min(maxWi
Post a Comment
Read more

Display Tooltip for Combo Box item C#.NET Winforms

By
In windows form combo box control sometimes while adidng items dynamically we have items whose width is greater than width of combox box control. In this case for making UI more user friendly we can show tooltip over such item. Here is the sample C# code to display such tooltip:  Add a Tooltip control on the form.  Add following code : this . combo_box1 . DropDownStyle = System . Windows . Forms . ComboBoxStyle . DropDownList; this . combo_box1 . DrawMode = DrawMode . OwnerDrawFixed; this . combo_box1 . DrawItem += new DrawItemEventHandler(combo_box1_DrawItem); this . combo_box1 . DropDownClosed += new EventHandler(combo_box1_DropDownClosed); this . combo_box1 . MouseLeave += new EventHandler(combo_box1_Leave); void combo_box1_DrawItem( object sender, DrawItemEventArgs e) { if (e . Index < 0 ) { return ; } string text = combo_box1 . GetItemText(combo_box1 . Items[e . Index
2 comments
Read more

Pass byte array from C# to C++ and vice-versa

By
Pass byte array from C# to C++                           If you want to pass a byte array to native DLL as parameter, you can use the Intptr to do this, please check the demo below. /C++ API code: TestDLL_API void TestArrayPara (BYTE * pArray, int nSize) { for ( int i= 0 ; i<nSize; i++) printf( "%d\n" , pArray[i]); } //C# code: class TestClass { [DllImport(@"TestDll.dll")] public static extern void TestArrayPara (IntPtr pArray, int nSize); public static void Test () { byte [] array = new byte [ 16 ]; for ( int i = 0 ; i < 16 ; i++) { array[i] = ( byte )(i + 97 ); } int size = Marshal.SizeOf(array[ 0 ]) * array.Length; IntPtr pnt = Marshal.AllocHGlobal(size); try { // Copy the array to unmanaged memory. Marshal.Copy(array, 0 , pnt, array
Post a Comment
Read more