Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.08.2018, 15:01
Аспирант
Отправить личное сообщение для Jolly Посмотреть профиль Найти все сообщения от Jolly
 
Регистрация: 11.03.2017
Сообщений: 40

Добавить блок после класса на js
Здравствуйте.

Помогите пожалуйста разобраться, что ни так.

Нужно блок с классом cro-checkout-trustsection, добавить после класса block, и нужно именно на js.

Добавляю такой код, выдает ошибку
document.getElementById('block').classList.add('cro-checkout-trustsection');


Если кому надо на jQuery, то это будет так
var newElems = $("<div class='cro-checkout-trustsection'></div>")
	    .append('<div class="cro-checkout-trustsection-title">Você pode pagar com:</div>')
		        
    newElems.css("border", "1px solid rgb(229, 229, 229)"); 
    
    $('.block').append(newElems);


<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title></title>
    
	<link href="css/font-awesome.min.css" type="text/css"  rel="stylesheet" />
	
	<style>	
}
    
	.blocks, .block {width: 50%; float: left;}
}
	</style>
	<SCRIPT type="text/javascript" language="JavaScript"
src="forymjs.js"></SCRIPT>
	</head>
	
	<div class="blocks">
	hisuhgiuo</div>
	<div class="block"> 
	fdgvisgdiu

</div>
</html>

var html = `<style>
		img {
    border: 0;
    max-width: 100%;
    }
	.cro-checkout-trustsection {
    background-color: white !important;
	border-radius: 5px;
	padding-top: 15px;
	border: 1px solid rgb(229, 229, 229);
    }
	.cro-checkout-payment-methods {
	width: 90%;
	margin: 15px auto;
    }
	.cro-checkout-trustsection-title {
    color: rgb(115, 115, 115);
	font-size: 18px;
	text-align: center;
	    padding-bottom: 15px;
    }
	.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    font-size: 18px !important;
    line-height: 18px !important;
}
.cro-guarantee-details {
    display: block;
    background-color: rgb(250, 250, 250);
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px !important;
    border: 1px solid rgb(204, 204, 204) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
    padding: 10px !important;
}
.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    font-size: 18px !important;
    line-height: 18px !important;
}
.cro-boleto-details {
    display: block;
    background-color: rgb(250, 250, 250);
    border-radius: 0 0 5px 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px !important;
    border: 1px solid rgb(204, 204, 204) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
    padding: 10px !important;
}
.left {
    float: left;
	width: 20px !important;
    margin-right: 10px !important;
}
.cro-guarantee-details-text {
    color: rgb(83, 83, 83);
    font-size: 18px !important;
    line-height: 18px !important;
}
	</style>

<div class="cro-checkout-trustsection">
<div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div>

<div class="cro-guarantee-details">
<div class="left">
<img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item">
</div>
<div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div>
</div>

<div class="cro-boleto-details">
<div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div>
<div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div>
  </div>
<div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div>
</div>`;

document.body.insertAdjacentHTML('beforeEnd', html)


document.getElementById('block').classList.add('cro-checkout-trustsection');
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2018, 15:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от Jolly
Добавляю такой код, выдает ошибку
document.getElementById('block').classList.add('cro-checkout-trustsection');
А что он должен делать по твоему представлению?
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2018, 15:29
Аспирант
Отправить личное сообщение для Jolly Посмотреть профиль Найти все сообщения от Jolly
 
Регистрация: 11.03.2017
Сообщений: 40

Должен добавить после класса block, блок с классом cro-checkout-trustsection
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2018, 16:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Jolly
Должен добавить после класса block,
заменить строки 86 - 89 на это
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.block').insertAdjacentHTML('afterEnd', html)
  });
Ответить с цитированием
  #5 (permalink)  
Старый 15.08.2018, 23:45
Аспирант
Отправить личное сообщение для Jolly Посмотреть профиль Найти все сообщения от Jolly
 
Регистрация: 11.03.2017
Сообщений: 40

Спасибо Вам Огромное. Все получилось .
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не подгружает css из js после .load kosty@ jQuery 0 03.04.2018 07:04
Как при появление класса в блоке1, добавить класс в блок2? raindew jQuery 3 11.10.2013 21:05
Как добавить блок зума не переж body а в необходимый блок? ilyas-> Элементы интерфейса 0 30.07.2013 15:27
Добавить кнопку после каждой ссылки… exec jQuery 0 21.01.2010 18:18
добавить к после отработки скрипта показ модалпопапа roman2 Работа 0 09.08.2009 22:48