0

I'd like to change the content of the p element:

<ion-view>
  <ion-content>
    <div class="list card">
      <div class="item item-avatar">
        <h4>{{name}}</h4>
      </div>
      <div class="item item-body">
        <p id='output1'>
          <h4>welcome to ionic</h4>
          x
        </p>
      </div>

so I'm trying this javascript code:

      <script type="text/javascript">
        var output1 = document.getElementById('output1');
        output1.innerHTML = data[id].when;
      </script>
    </div>
  </ion-content>
</ion-view>
Malte Hartwig
  • 4,477
  • 2
  • 14
  • 30
Morad
  • 1
  • Possible duplicate of [How to use an

    tag

    inside a

    in the middle of a text?](http://stackoverflow.com/questions/4675985/how-to-use-an-h2-tag-h2-inside-a-p-p-in-the-middle-of-a-text)     – Malte Hartwig May 15 '17 at 06:55
  • how does this not work. What is the output you are expecting and what is the output you are getting? – Blip May 17 '17 at 08:21

2 Answers2

0

When I tried it in Chrome, it worked to some degree. But as the linked questions below point out, the behavior can differ between browsers. This is my rendered html:

<div class="item item-body">
  <p id="output1">data[id].when</p>
  <h4>welcome to ionic</h4>
  x
  <p></p>
</div>

As you can see, your output1 p was broken into two. This happens if you use elements like h4 inside p elements. The heading breaks the paragraph into: p, h4, x, and another p. The first p is the one you defined, and its inner html is correctly replaced (well, it is empty initially, so it is just added). The result is that it looks like you just add the inner html instead of replacing it.

In order to fix it, you could use display: inline-block or (better) replace your p by a more appropriate element.

Please, read these questions for more information:

How to use an <h2> tag </h2> inside a <p></p> in the middle of a text?

Nesting block level elements inside the <p> tag... right or wrong?

Community
  • 1
  • 1
Malte Hartwig
  • 4,477
  • 2
  • 14
  • 30
0

you can try out this

 <ion-view>
  <ion-content>
    <div class="list card">
      <div class="item item-avatar">
         <h4>{{name}}</h4>
      </div>
      <div class="item item-body">
       <p ng-bind-html="Mycontent">
       </p>
   </div> 
 </ion-content>

in Controller

$scope.Mycontent="<h4>welcome to ionic</h4> x";

this will print all html code into p tag as it is.

in final your javascript code wiil be like that

  app.controller('myCtrl', function($scope) {
     $scope.Mycontent=data[id].when;
  });
vishal
  • 542
  • 6
  • 12