Хобрук: Ваш путь к мастерству в программировании

Я хотел бы изменить содержимое элемента ‹p›‹/p› с помощью кода javascript, но это не работает

Я хотел бы изменить содержимое элемента p:

<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>

поэтому я пробую этот код javascript:

      <script type="text/javascript">
        var output1 = document.getElementById('output1');
        output1.innerHTML = data[id].when;
      </script>
    </div>
  </ion-content>
</ion-view>
ionic-framework javascript
14.05.2017

Ответы:


1

ты можешь попробовать это

 <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>

в контроллере

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

это напечатает весь HTML-код в теге p как есть.

в конечном итоге ваш код javascript будет таким

  app.controller('myCtrl', function($scope) {
     $scope.Mycontent=data[id].when;
  });
15.05.2017

2

Когда я попробовал это в Chrome, это в какой-то степени сработало. Но, как показывают связанные вопросы ниже, поведение может отличаться в разных браузерах. Это мой визуализированный HTML:

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

Как видите, ваш output1 p был разбит на две части. Это происходит, если вы используете такие элементы, как h4, внутри p элементов. Заголовок разбивает абзац на: p, h4, x и еще p. Первый p - это тот, который вы определили, и его внутренний html правильно заменен (ну, он изначально пустой, поэтому просто добавляется). В результате создается впечатление, что вы просто добавляете внутренний HTML-код, а не заменяете его.

Чтобы исправить это, вы можете использовать display: inline-block или (лучше) заменить p более подходящим элементом.

Пожалуйста, прочитайте эти вопросы для получения дополнительной информации:

Как использовать тег ‹h2› ‹/h2› внутри тега ‹p›‹/p› в середине текста?

Вложение элементов блочного уровня внутри тега ‹p› ... правильно или неправильно?

15.05.2017
Новые материалы
Понимание СТРУКТУРЫ ДАННЫХ И АЛГОРИТМА.
Что такое структуры данных и алгоритмы? Термин «структура данных» используется для описания того, как данные хранятся, а алгоритм используется для описания того, как данные сжимаются. И данные, и..
Как интегрировать модель машинного обучения на ios с помощью CoreMl
С выпуском новых функций, таких как CoreML, которые упростили преобразование модели машинного обучения в модель coreML. Доступная модель машинного обучения, которую можно преобразовать в модель..
Создание успешной организации по науке о данных
"Рабочие часы" Создание успешной организации по науке о данных Как создать эффективную группу по анализу данных! Введение Это обзорная статья о том, как создать эффективную группу по..
Технологии и проблемы будущей работы
Изучение преимуществ и недостатков технологий в образовании В быстро меняющемся мире технологии являются решающим фактором в формировании будущего работы. Многие отрасли уже были..
Игорь Минар из Google приедет на #ReactiveConf2017
Мы рады сообщить еще одну замечательную новость: один из самых востребованных спикеров приезжает в Братиславу на ReactiveConf 2017 ! Возможно, нет двух других кланов разработчиков с более..
Я собираюсь научить вас Python шаг за шагом
Привет, уважаемый энтузиаст Python! 👋 Готовы погрузиться в мир Python? Сегодня я приготовил для вас кое-что интересное, что сделает ваше путешествие более приятным, чем шарик мороженого в..
Альтернатива шаблону исходящих сообщений для архитектуры микросервисов
Познакомьтесь с двухэтапным сообщением В этой статье предлагается альтернативный шаблон для папки Исходящие : двухэтапное сообщение. Он основан не на очереди сообщений, а на..