# Html id div tag rendering

**URL:** <https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [April 5, 2021, 3:12am UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676 "2021-04-05T03:12:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![madhooleca](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madhooleca](https://forum.wixstudio.com/u/madhooleca)\
**Post date:** [April 5, 2021, 3:12am UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/1 "2021-04-05T03:12:34Z")

</div>

```javascript
I want to add code like following in main page of my wix site
1. <div id="Myplace"></div>

Then want to populate it in my javacript code as following
2. $w('#Myplace').id.innerHTML="Temperatue is ....";

My proposed solution was to add code snippet in "Body End" in "advanced->custom code"
setting then Write javascript code in dev mdoe "Home" page java script code.
But it doesn't work.  

```

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 5, 2021, 3:08pm UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/2 "2021-04-05T15:08:13Z")

</div>

You can use an HTML-component to realize your wished idea.

1. Add an HTML-Component onto your page.
2. Resize it like you want it to have on your site-page.
3. Send your wished data to the HTML-Component with…  
[https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage](https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage)
4. And receive the data in the html-component to work with it…

Something like this…  
Page-Code:

```javascript
let divID = "myPlace"
$w("#myHtmlComponent").postMessage(divID);

```

HTML-Component-Code:

```javascript
<!doctype html>
<html>
<head>

<script type="text/javascript">
  function init () {
    window.onmessage = (event) => {
    if (event.data) {
      myPlace = event.data
      console.log(myPlace)
      document.getElementById(myPlace).innerHTML = "Temperatue is ....";
    }
    else{}
  }
}
</script>

</head>
<body onload="init();" style="background-color:lightgray;">
<div id=myPlace></div>
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![madhooleca](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madhooleca](https://forum.wixstudio.com/u/madhooleca)\
**Post date:** [April 12, 2021, 1:53am UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/3 "2021-04-12T01:53:58Z")

</div>

Thanks for answering. But where do I find ‘HTML-Component-Code’? When I load ‘edit site’ I see icon ‘{}’ which has tooltips of ‘files’ and there is no html code here. it all talks about front end javascript and backend javascript and web modules. Its very frustrating to work with such restrictive environment. Wix is not at all user friendly.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 12, 2021, 7:42pm UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/4 "2021-04-12T19:42:40Z")

</div>

@madhooleca When i started with wix, i had the same opinion like you, but when you understand the Wix-Editor and how it is structured, you will change your mind.

What you should know?

1. Yes there are front-end-codes (code-sections) and back-end-codes (code-sections). Front-End-Code is in most cases the Code which you will find directly on your current page. Backend-Code you will find in a separate JSW-file.

2. Where to add HTML-CODE?  
You can use the wix-ui to put a HTML-Component onto your page…

 ![](https://us1.discourse-cdn.com/wix/original/3X/6/6/66d3e53be69b7a093a627670599207ea510225bb.png)  
3) When you have add the HTML-component you then click "Edit-HTML-Component …

 ![](https://us1.discourse-cdn.com/wix/original/3X/f/f/ffb53b11ae09ea91300e268fadf00e227cbee492.png)

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [April 13, 2021, 1:12pm UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/5 "2021-04-13T13:12:46Z")

</div>

See the docs [Coding With Velo](https://support.wix.com/en/velo-by-wix/coding-with-velo) , especially the [Velo: Javascript support](https://support.wix.com/en/article/velo-javascript-support) section, to better understand how Wix’s Velo works.

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [April 18, 2021, 8:37am UTC](https://forum.wixstudio.com/t/html-id-div-tag-rendering/4676/6 "2021-04-18T08:37:16Z")

</div>

You can set the text of an element very simply using the [Velo text element API](https://www.wix.com/velo/reference/$w/text/text) :

```javascript
$w('#Myplace').text = "Temperatue is ....";

```

This is not restrictive at all. What else do you need?