Блог

Главная - Вопросы по программированию - Что находится между добавлением() и добавлением()?

Что находится между добавлением() и добавлением()?

#javascript #html #jquery #css #prepend

Вопрос:

Я постараюсь побыстрее. Я пытаюсь расположить элемент в соответствии с моей целью. Обычно у нас есть добавление (перед целью) и добавление (после цели). Но есть ли что-то в этом роде, что помогает нам поместить этот элемент В то, на что мы нацелены, вместо того, чтобы помещать его перед (добавить) или после(добавить)?

Комментарии:

1. На что вы нацелены? Если он содержит дочерний элемент , вы можете заменить или расположить этот элемент innerHTML , или добавить/дополнить его к этому дочернему элементу.

2. Допустим, есть цель под названием «X». И я пытаюсь разместить какой-то элемент » В » на странице. Я могу либо использовать дополнение и поставить B перед X, либо я могу использовать добавление и поставить B после X. Как я могу поставить B НА X?

3. Если вы хотите наложить B на X, то вам нужно вставить его внутрь X и расположить его абсолютно вставкой 0.

4. Будет ли это заменой ?

5. DOM знает только до и после, так как в DOM не может быть более одного элемента в одной и той же позиции. CSS знает абсолютное позиционирование. Но ваш вопрос не проясняет, чего вы пытаетесь достичь.

Ответ №1:

Если вы хотите добавить новые HTML — элементы в цель… Я не знаю, хочешь ли ты этого.

 $('.target-x').html('<div class="target-b">new elements</div>') 
 .target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="target-top">Elements</div>
    <div class="target-x">New Elements Target</div>
    <div class="target-bottom">Elements</div>
</body>

Ответ №2:

Вы можете использовать position:absolute на a :before , чтобы разместить его НА фактическом содержимом.

HTML

 <div class="example">This is an example div</div>

CSS

 .example {
  background-color: #5BC8F7;
}

.example::before {
  position:absolute;
  content: "Above!";
  background-color: #FFBA10;
}
Метки: